How to use the jQuery keyup event to modify the value of HTML inputs

Question

I have 3 HTML inputs. When modifying the text in input 1, input 2 should update with the text that was previously in input 1. Input 3 should similarly update with the text that was previously in input 2.

diagram

Please try to improve your English. It is not clear what you want. — Bram Vanroy
– Bram Vanroy, Commented Oct 19, 2012 at 11:32
I think it would be better if you take some courses in English language before learning Web programming language. — Om3ga
– Om3ga, Commented Oct 19, 2012 at 11:33

Adil · Accepted Answer · 2012-10-19 11:30:49Z

2

You can do it this way.

Live Demo

<input type="text" id="txt1" class="someclass" />
<input type="text" id="txt1" class="someclass" />
<input type="text" id="txt1" class="someclass" />

$('.someclass').change(function(){
   $(this).next('.someclass').val($(this).val()); 
   $(this).next('.someclass').change();
});

Binding keyup event will change as soon as you type something

Live Demo

answered Oct 19, 2012 at 11:30

Adil

148k25 gold badges217 silver badges207 bronze badges

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

Comments

mtmacdonald · Accepted Answer · 2012-10-19 11:45:45Z

1

Use the jQuery val() method to set the input values as desired.

<!doctype html>
<html>
 <head>
 <script type="text/javascript" src="jquery.min.js"></script>
 <script type="text/javascript">
    $(document).ready(function(){
        $("#input1").keyup(function() {
            $('#input2').val($('#input1').val());
            $('#input3').val($('#input2').val());
        });
    });
 </script>
 </head>
 <body>
    <input type="text" id="input1" />
    <input type="text" id="input2" />
    <input type="text" id="input3" />
 </body>
</html>

edited Oct 19, 2012 at 11:45

answered Oct 19, 2012 at 11:32

mtmacdonald

15.3k20 gold badges70 silver badges102 bronze badges

Collectives™ on Stack Overflow

How to use the jQuery keyup event to modify the value of HTML inputs

2 Answers 2

Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related