Last Updated on April 15, 2024 by Roshan Parihar
To update textbox value while typing on another textbox in jQuery, you can use the on('input') event with val() function.
You can also choose to use the keyup() event of jQuery to set value of textbox on keyup on another textbox.
Let’s see some useful examples.
Set Value of Textbox on Typing another Textbox Using oninput Event jQuery
When someone input some text on first textbox, it automatically set the value on another textbox while typing. You can use the on(‘input’) event with val() function.
Test the below example live to see the two input text boxes and type on first box to set it on another.
|
1 2 3 4 5 6 7 8 9 10 |
<script> $(document).ready(function(){ $('#first-textbox').on('input', function(){ var txtval = $(this).val(); $('#second-textbox').val(txtval); }); }) </script> <input type="text" placeholder="Type here..." id="first-textbox"><br><br> <input type="text" placeholder="This will automatically update" id="second-textbox"> |
This is useful when you have several textboxes and want to update some text box while typing on one.
Using Keyup Event in jQuery
In addition to the above example, you can also update one text box value with another using keyup event of jQuery. It updates the second textbox value after typing on first.
See the live example with the button given below.
|
1 2 3 4 5 6 7 8 9 10 |
<script> $(document).ready(function(){ $('#first-textbox').keyup(function(event) { var txtval = $(this).val(); $('#second-textbox').val(txtval); }); }) </script> <input type="text" placeholder="Type here..." id="first-textbox"><br><br> <input type="text" placeholder="This will automatically update" id="second-textbox"> |
Both the above examples can give you same result of input to update textbox in jQuery. The first example using on('input') event with val() function set value while typing. However, the keyup event updates the value of another after typing on one text.
Out of these method, on('input') event with val() function will be the preferred one.