jQuery change input value via jquery not work after user manual edit

Question

I'm experiencing this trouble with jQuery and attr() function.

Take a look:

one <input id='one' type="text"><br>
two <input id='two' type="text">

<script>
$('#one').on('input',
             function(){
                 var result = 'test'
                 $('#two').attr('value',result);
             }
            );
</script>

This is the trouble:

I type something in the 'one' input;
the 'test' text was correctly inserted in the 'two' input.
Now I edit the content of the 'two' input.
Now if I type something new in the 'one' input , the 'two' input content isn't replaced with the 'test' text ! Why ?! How can I fix it ?

P.S. See the live code here http://jsfiddle.net/5XQJj/4/

Jason P · Accepted Answer · 2013-12-17 15:39:27Z

2

Use .val() to set input values:

http://jsfiddle.net/dh23j/

$('#two').val(result);

Often, setting element attributes won't update more than once. You need to update their properties instead using .prop or using functions intended for the purpose, like .val().

answered Dec 17, 2013 at 15:39

Jason P

27k3 gold badges34 silver badges45 bronze badges

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

4 Comments

NikoDev Over a year ago

great ! but If I need to update the value property also, sould I do something like $('#two').val(result).attr('value',result) ??

Jason P Over a year ago

No, .val() should do that for you. I believe that's probably what happens behind the scenes.

NikoDev Over a year ago

in firebug i cannot see this.. are you sure ?

Jason P Over a year ago

Fairly. What are you looking at? Do you need to refresh a watch maybe?

Community · Accepted Answer · 2017-05-23 12:11:33Z

0

Try .prop()

$('#one').on('input', function () {
    var result = 'test'
    $('#two').prop('value', result);
});

fiddle Demo

Read .prop() vs .attr()

Better use .val()

fiddle Demo

$('#two').val(result);

edited May 23, 2017 at 12:11

CommunityBot

11 silver badge

answered Dec 17, 2013 at 15:40

Tushar Gupta - curioustushar

57.2k24 gold badges106 silver badges110 bronze badges

Comments

patel.milanb · Accepted Answer · 2013-12-17 15:40:53Z

0

you should use .val() rather than .attr or .prop

updated JSfiddle: http://jsfiddle.net/5XQJj/6/

$('#one').on('change', function () {
    var result = 'test'
    $('#two').val(result);
});

answered Dec 17, 2013 at 15:40

patel.milanb

6,01215 gold badges62 silver badges95 bronze badges

Collectives™ on Stack Overflow

jQuery change input value via jquery not work after user manual edit

3 Answers 3

4 Comments

Comments

Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

4 Comments

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related