Set input values when one input value change JQuery

Question

Now, when the 1st row value change, the 2nd and 3rd row change accordingly. The problem is this's hard code, i don't know the no of rows as it's generated from the database.Any idea?Many thanks

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

 <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> <tr> <td><input type="text" id="A1" name="A" value=""></td> </tr><br> <tr> <td><input type="text" id="B1" name="A" value=""></td> </tr> <br> <tr> <td><input type="text" id="C1" name="A" value=""></td> </tr> 

Answer 1

you can just select all inputs and update values for all.

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

 <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> <tr> <td><input type="text" id="A1" name="A" value=""></td> </tr><br> <tr> <td><input type="text" id="B1" name="A" value=""></td> </tr> <br> <tr> <td><input type="text" id="C1" name="A" value=""></td> </tr> 

Also if you want to select a few you can select multiple ids separated by commas. like this:

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

Answer 2

You can assign the value to all the inputs in your HTML, like this:

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

 <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> <tr> <td><input type="text" id="A1" name="A" value=""></td> </tr><br> <tr> <td><input type="text" id="B1" name="A" value=""></td> </tr> <br> <tr> <td><input type="text" id="C1" name="A" value=""></td> </tr> 

Answer 3

Different from other answers given here, changing all input elements is too risky in my opinion. What I would suggest id adding a class to all input fields you wish to change, and changing your function to a JQuery selector according to this class (In the example below, the class I added is called changable ).

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

 <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> <tr> <td><input type="text" id="A1" class="changable" value=""></td> </tr><br> <tr> <td><input type="text" id="B1" class="changable" value=""></td> </tr> <br> <tr> <td><input type="text" id="C1" class="changable" value=""></td> </tr>