Question

I have two tables. I want to mirror the values from one table to another. The current implementation i have is this:

   <script type="text/javascript">  
        $("#textfield1, #textfield2, #textfield3, #select1").on("keyup keypress blur click change", function(event){        
            $("input[type='text']#copytextfield1").val( $("[type='text']#textfield1").val() );
            $("input[type='text']#copytextfield2").val( $("[type='text']#textfield2").val() );
            $("input[type='text']#copytextfield3").val( $("[type='text']#textfield3").val() );
            $("input[type='text']#copytextfield4").val( $("select#select1").val() );        
        });         
    </script>

as you can see, the names are quite similar. the only difference is that the mirroring elements have ‘copy’. can you suggest of ways to make this more efficient? maybe take advantage of the naming convetion?

Answer 1

It could be done like this:

   <script type="text/javascript">  
        $("#textfield1, #textfield2, #textfield3, #select1").on("keyup keypress blur click change", function(event){
            for (var i = 1; i <= 3; i++) {
                $("#copytextfield" + i).val( $("#textfield" + i).val() );
            }
            $("input[type='text']#copytextfield4").val( $("select#select1").val() );        
        });         
    </script>

The ID of the select causes some trouble though, so if you change the id of all the fields to something like input1 – input4 instead, it could be refactored even more.

    <script type="text/javascript"> 
        $("#input1, #input2, #input3, #input1").on("keyup keypress blur click change", function(event){
            for (var i = 1; i <= 4; i++) {
                $("#copytextfield" + i).val( $("#input" + i).val() );
            }       
        });         
    </script>