如何更改使用jquery中的循环创建的文本框onchange的值

问题描述：

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

答

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

答

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.

答

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>

如何更改使用jquery中的循环创建的文本框onchange的值

相关推荐