on input get only new input value - javascript

I have a text input where I get the input and use it. I have:
$(myinput).on('input', function() {
$(somediv).append($(this).val());
});
I would like to keep using the append function, but the problem is on every input, the entire input val() is being appended. So when I click 'a', its adding 'a', but when I click 'b' after a, it appends 'ab' not 'b'.
is there a way to only get the input of the most recent .input event without clearing out the input box?

you could use .text() instead of .append(). This will set the whole text, not just append it.
$(somediv).text($(this).val());
Or you could use the last char of your string.
$(somediv).text($(this).val().slice(-1));
See: how to get the last character of a string?

I am assuming that you want to use append because there is other content in somediv that you don't want to lose. If that is the case, you can create a sub-element to receive the text, append it just once, then change its contents when the input field changes:
var receiver = $('span');
$(somediv).append(receiver);
$(myinput).on('input', function() {
receiver.html($(this).val());
});

$("#myinput").on('input', function() {
$("#somewhere").val("");
setTimout(function() {
$("#somewhere").append($(this).val());
},10);
});
or
$("#myinput").focusout(function() {
$("#somewhere").val("");
setTimout(function() {
$("#somewhere").append($(this).val());
},10);
});
the timeout is for doing things without overlapping.
You can try also without timoeout

You could also bind to the keyup event:
$(document).on('keyup', '#inputID', function(e){
var key = String.fromCharCode(e.which);
$('div').append(key);
});
jsFiddle Demo

Related

How to change value of multiple text inputs using class name

I want to be able to change multiple text inputs (but not all) by class, but can't seem to get it working.
Any ideas?
Basically I have multiple reset buttons on the same page I'd like to have 'resetting' the value of the targeted text inputs to nothing.
Here's the code:
$(".reset").on('click', function() {
document.getElementsByClassName('input-1').value = '';
});
It works fine when using getElementById, but I would rather minimise the code and not have to repeat it each time for every text input.
You are already using jQuery, so just use
$(".reset").on('click', function() {
$('.input-1').val('');
});
Notice the . before the class name, same as in .reset.
If you want to use vanilla JavaScript, you have to loop through the HTMLCollection returned by getElementsByClassName:
$(".reset").on('click', function() {
Array.from(document.getElementsByClassName('input-1')).forEach(el => el.value = '');
});
jQuery does that automatically for you.
You can use an special selector for this job:
let inputs = [... document.querySelectorAll("[class^='input-']")];
inputs.forEach(i => i.value = "");
class^= will return all the elements containing class attribute starting with "input".

jQuery returns 'undefined is not a function' when appending content

So, I created the code where user clicks on the button and then jQuery reads the value inside the input text and I stored that in variable. But if I want to use that variable and append that value to the element, jQuery returns undefined is not a function and it doesn't work. Here is the fiddle:
Fiddle: http://jsfiddle.net/2cf1y8Lc/1/
Is this about adding menu div element form text field. Here is update of fiddle code you send hope it helps.
$('#btnSubmit').on('click',function(e){
var newMenu = $('#add_list').val();
var elem = '<li><span class="glyphicon glyphicon-briefcase"></span> '+newMenu+'</li>';
$('.nav-pills.nav li').last().append(elem);
});
http://jsfiddle.net/2cf1y8Lc/2/
One possible reason may be if the value from text input is null and you are using parseInt() or parseFloat() on this variable. So check its value before use
$("#btn").click(function(e){
var myvar= $("#myhiddenfld").val();
if(myvar=="") myvar=0;
else myvar=parseInt(myvar);
$("#storeinput").val(myvar);
//or use your append code here as you like
})

enter value of input to the html, not the dom

I have an input in my html file (attribute id is: imgName).
while the user enters some text to this input, it's inserted to the DOM.
I want it to be inserted to the html.
so I try to do this thing:
$(document).keydown(function (e) {
if (e.target.id == "imgName") {
// get the char and create text node
var text = document.createTextNode(String.fromCharCode(e.which));
// insert it to the input
e.target.appendChild(text);
}
});
but it does nothing..
any help appreciated!
You've done something wrong:
Your are listening for an input-event on your complete document, but your input will only be on your input-field. so you need: $('#imgName').keydown...
You are using jQuery... so, use it to do this stuff is easier.
Your condition is not needed.
try this:
$('body').append(String.fromCharCode(e.which));
DEMO
You can't append something to an input, it's a self closing element that has no content, and to get the proper result from String.fromCharCode you should be using the keypress event
$('#imgName').on('keypress', function (e) {
var text = document.createTextNode(String.fromCharCode(e.which));
document.body.appendChild(text);
});
FIDDLE

jQuery setting input.value = input.title (or other input attribute)

I'm trying to figure out how to set the input value of a text field to the value of it's title when the page loads, as a way to show placeholder text. I'm using an HTML4 Strict doctype. I don't want to store the placeholder text in the input value, because I don't want people without javascript to have to delete the text before typing. I want it to be added with javascript, and then removed when the input gains focus. I have the focus() and blur() methods working, but I can't figure out how to write the initial pageload function to pass the input's title to the val() function.
I currently have this code:
// This doesn't work, it grabs the page title:
$('#item-search').val(this.title);
// Works:
$('#item-search').focus(function() {
if (this.value == this.title) {
this.value = '';
}
});
// Works:
$('#item-search').blur(function() {
if (this.value == '') {
this.value = this.title;
}
});
Just to add another variation, .val() can accept a function as its parameter, fixing your this issues:
$('#item-search').val(function () {
return this.title;
});
this refers to the current scope. In your first example, its referring to document.
You may want.
$('#item-search').val($('#item-search').attr('title'));
Even better:
var $itemSearch = $('#item-search');
$itemSearch.val($itemSearch.attr('title'));
$('#item-search').val(this.title);
In this line this refer the document(html) and set the <title>. To accomplish you job do this:
$('#item-search').val($('#item-search').attr('title'));
Try this:
$('#item-search').val($('#item-search').attr('title'));
Please try this.
$('#item-search').val($("#item-search").attr("title"));

How to get four following text inputs after each checkbox?

I am traversing checkboxes like this:
$('.day').each(function() {
// here I need to get the following 4 text inputs in the HTML
// and set some attributes on them
});
After every checkbox there are four text input fields (there are also some div, span tags for CSS around them). So inside the loop above I need to get four text input fields that follow the checkbox in the HTML source so I can set some attributes on them.
How would I go about that?
Hard to say without the markup, but you could try this.
$('.day').each(function() {
$(this).nextAll('input').slice(0,4).attr('someAttribute','somevalue');
});
If there's some stopping point, like another .day element, you could use nextUntil then .filter().
$('.day').each(function() {
$(this).nextUntil('.day').filter('input').attr('someAttribute','somevalue');
});
EDIT: When you say there are some <div> and other tags around them, I assumed that you meant in between them.
If you're actually saying that the inputs are nested in them, then you could do something like this:
$('.day').each(function() {
$(this).nextAll(':has(input)').slice(0,4).find('input').attr('someAttribute','somevalue');
});
or perhaps this:
$('.day').each(function() {
$(this).nextAll().find('input').slice(0,4).attr('someAttribute','somevalue');
});
or again, if there's a stopping point you can indicate like another .day, use nextUntil():
$('.day').each(function() {
$(this).nextUntil('.day').find('input').attr('someAttribute','somevalue');
});
if they are siblings within a parent container, you might be able to use $(this).nextAll('input').each(function(){}); or $(this).nextAll().find('input').each(function(){}); depending on your html structure. Or var p = $(this).parent(); if (p && p[0]) p[0].find('input').each(function(){});
This is a total guess, since you've shown no markup whatsoever:
$('.day').each(function() {
var $this = $(this);
var $inputs = $this.nextAll('input[type=text]');
$inputs.each(function () {
// do whatever with the inputs here
});
});
if your trying to set css properties to the inputs you can use css selectors which are quite powerful, like this
.day ~ input {
//set your styles for the input
}
what this means is you are selecting all the inputs exactely after .day
hope this helps.
Try
$('.day').each(function() {
// get input fields
var first_input = $(this).nextAll().filter('input:first');
var second_input = first_input.nextAll().filter('input:first');
var third_input = second_input.nextAll().filter('input:first');
var fourth_input = third_input.nextAll().filter('input:first');
// set attribute xyz to value
first_input.attr('xyz', 'value');
second_input.attr('xyz', 'value');
third_input.attr('xyz', 'value');
fourth_input.attr('xyz', 'value');
});

Categories