Get the value from a dynamic input element

Question

In a web page we have an input type text:

<input id="bar" type="text" />

I want to insert before another input element before the above element:

var input = $('<input type="text" value="foo" id="ciccia" />')
input.insertBefore($('#bar'))

And add a simple behavior:

input.on('keyup', function(){
    console.log(input.attr('value'));
})

console.log always get "foo" string

If I change

 var input = $('<input type="text" value="foo" id="ciccia" />')

to

 var input = $('<input type="text" value="bar" id="ciccia" />')

console.log always get "bar" string.

What's wrong with DOM? Why I cannot read the real value of text input?

Rajaprabhu Aravindasamy · Accepted Answer · 2014-07-01 12:11:58Z

4

Try to use .val() to retrieve the text box value, since .attr('value') will always return the value which was set in the beginning.

input.on('keyup', function(){
    console.log(input.val());
});

or simply use this.value instead of input.val()

answered Jul 1, 2014 at 12:11

67.2k17 gold badges107 silver badges133 bronze badges

Sign up to request clarification or add additional context in comments.

Comments

Satpal · Accepted Answer · 2014-07-01 12:12:28Z

1

attr will always return the value which was initially set. You need to use .value property

Use

input.on('keyup', function(){
    console.log(this.value);
})

answered Jul 1, 2014 at 12:12

Satpal

134k13 gold badges168 silver badges171 bronze badges