How to change value of textbox onchange created using loop in jquery

Question

I need to change the value of second one on change of first one

for ex if the user change the value for valuex00 the same value should be in valuey00, same for valuex01 and valuey01

     //first one 
<?php $a=0;?>
<?php  for ($i=0;$i<5;$i++) {?>
<?php  for ($j=0;$j<5;$j++) {?>

    <input type="text" name="<?php echo 'post1['.$a.'][value1]'?>" class="valuex<?php echo $i.$j;?>">


<?php $a++;?>
<?php }?>
<?php }?>


   //second one      
   <?php $a=0;?>
<?php  for ($i=0;$i<5;$i++) {?>
<?php  for ($j=0;$j<5;$j++) {?>

    <input type="text" name="<?php echo 'post2['.$a.'][value1]'?>" class="valuey<?php echo $i.$j;?>">


<?php $a++;?>
<?php }?>
<?php }?>

How to achieve this using jquery on change event

Please suggest with solution

Would be useful if you post the generated html, instead of the PHP. Because this question looks like front-end only. Also you have to show a little effort in trying to code it yourself, and we help you to get it right. — yuriy636
– yuriy636, Commented Jul 18, 2016 at 17:45

Quynh Nguyen · Accepted Answer · 2016-07-18 17:49:28Z

Try this

<!DOCTYPE html>
<html>
<body>
<?php $a=0;?>
<?php  for ($i=0;$i<5;$i++) {?>
<?php  for ($j=0;$j<5;$j++) {?>

    <input type="text" onchange="myFunction(this)" name="<?php echo 'post1['.$a.'][value1]'; ?>" id="valuex_<?php echo $i.$j;?>" class="valuex<?php echo $i.$j;?>">


<?php $a++;?>
<?php }?>
<?php }?>

    <br>
    //second one      
   <?php $a=0;?>
<?php  for ($i=0;$i<5;$i++) {?>
<?php  for ($j=0;$j<5;$j++) {?>

    <input type="text" name="<?php echo 'post2['.$a.'][value1]'?>" id="valuey_<?php echo $i.$j;?>"  class="valuey<?php echo $i.$j;?>">


<?php $a++;?>
<?php }?>
<?php }?>
<script>
function myFunction(ele) {
    var id = ele.id;
    var valuefirstone = document.getElementById(id).value;
    var res = id.split("_");
    document.getElementById("valuey_"+res[1]).value = valuefirstone;
}
</script>
</body>
</html>

My result

Spencer D · Accepted Answer · 2016-07-18 18:04:28Z

I'm more of a Vanilla Javascript kind of guy, but the following should work.

     //first one 
<?php $a=0;?>
<?php  for ($i=0;$i<5;$i++) {?>
<?php  for ($j=0;$j<5;$j++) {?>

    <input type="text" name="<?php echo 'post1['.$a.'][value1]'?>" id="valuex<?php echo $i.$j;?>" data-num="<?php echo $i.$j;?>" class="entryxy">


<?php $a++;?>
<?php }?>
<?php }?>


   //second one      
   <?php $a=0;?>
<?php  for ($i=0;$i<5;$i++) {?>
<?php  for ($j=0;$j<5;$j++) {?>

    <input type="text" name="<?php echo 'post2['.$a.'][value1]'?>" id="valuey<?php echo $i.$j;?>" data-num="<?php echo $i.$j;?>" class="entryxy">


<?php $a++;?>
<?php }?>
<?php }?>

<script>
    window.onload = function(){
            $(".entryxy").on("change",
                    function(){
                        // get data-number so we know which data set we need to modify
                        var sDataNum = this.getAttribute("data-num");
                        // get the value that needs to be set to opposing textbox
                        var sVal = this.value;
                        // determine if it is x or y that was changed
                        if(this.id.indexOf("valuex") > -1){
                            // Value of X changed
                            var eleY = $(("#valuey" + sDataNum))[0];
                            eleY.value = sVal;
                        }else{
                            // Value of Y changed
                            var eleX = $(("#valuex" + sDataNum))[0];
                            eleX.value = sVal;
                        }
                    }
                );
        };
</script>

A few things I changed:

In order to allow for event listeners, I made it so all textboxes use a common class called "entryxy".
I made "valuex##" and "valuey##" IDs instead of class names, thus allowing those elements to be accessed a little easier.
I added in data attributes that help to quickly identify which set of data a textbox belongs. (That way we can reassign values where necessary.)

The actual jQuery and Javascript is in a script tag at the end of the PHP sections. I have not tested it yet, but I did comment it heavily, so at a minimum, it should definitely push you in the right direction. If anything in there does not make sense, please leave a comment and I will try to explain it a bit more.

TwystO · Accepted Answer · 2016-07-18 18:06:04Z

First you should clean your PHP code a little bit. Then using jQuery (that was the initial purpose of your question), you can try something like that:

<!doctype html>
<html>
<head>
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.0/jquery.min.js"></script>
    <script type="text/javascript">
        $(document).ready(function() {
            $('input[class^="valuex"]').on('keyup', function() {
                var self = $(this);
                var className = self.prop('class');
                var id = className.substr(-2);
                $('input[class="valuey'+id+'"]').val(self.val());
            });
            $('input[class^="valuey"]').on('keyup', function() {
                var self = $(this);
                var className = self.prop('class');
                var id = className.substr(-2);
                $('input[class="valuex'+id+'"]').val(self.val());
            });
        });
    </script>
</head>
<body>
    <?php
        for ($i = 0; $i < 5; $i++) {
            for ($j = 0; $j < 5; $j++) {
                echo '<input type="text" name="post1[' . $i . '][value1]" class="valuex' . $i . $j . '">';
            }
        }
        for ($i = 0; $i < 5; $i++) {
            for ($j = 0; $j < 5; $j++) {
                echo '<input type="text" name="post2[' . $i . '][value1]" class="valuey' . $i . $j . '">';
            }
        }
    ?>
</body>
</html>

Collectives™ on Stack Overflow

How to change value of textbox onchange created using loop in jquery

3 Answers 3

Comments

Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

Comments

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related