Search code examples
jqueryhtml-tablekeyup

Set input value from current input textfield on change event


I have a table with two input boxes. A and B. I enter something into input A (and also B) and I want it's value to automatically be set to whatever I type into it on change event. Is this easy to do?

<tr>    
 <td><input type="text" id="A1" name="A" value=""></td>
 <td><input type="text" id="B1" name="B" value=""></td>
</tr>

Solution

  • Description

    If you want to keep the two input elements in sync on every keystroke you should use jQuery´s .keyup() and .change() (for copy and paste) method.

    Sample

    $("#A1").change(function() {
        $("#B1").val($("#A1").val());
    });
    
    $("#B1").change(function() {
        $("#A1").val($("#B1").val());
    });
    
    $("#A1").keyup(function() {
        $("#B1").val($("#A1").val());
    });
    
    $("#B1").keyup(function() {
        $("#A1").val($("#B1").val());
    });
    

    jsFiddle Demonstration

    More Information