update the next inputs with different ids with the same value

Question

here is my code. i am having different ids for input elements and my idea is to update the same value to the all inputs. i am having the idea how to update the all inputs onchange but i need to change the next but not previous. Example suppose if i have 20 inputs if i change the 8th input the value should be updated to all the inputs from 8th to 20th input but the previous 7 inputs should not be changed. i stuck up here how to write the code.

 <html>
  <head>
   <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
   <script>
 $(document).ready(function(){

     $('.tc').change(function(){

          var id=$(this).attr("id"); 
          var val=$(this).val();
          var tot=$('.tc').length;


         });    


       });
 </script>
</head>
  <body>
     <?php
         include('connect.php');
          $yr=$_POST['year'];
          $sm=$_POST['sem'];
          $br=$_POST['branch'];
          $k=0;

         $sql="select * from intstd where year='$yr' and sem='$sm' and branch='$br'";
         $query=mysql_query($sql);
         echo"<table>";
          while($row=mysql_fetch_array($query))
          {
             $k++;
             echo"<tr>";
             echo"<td>$k</td>";
             echo"<td>". $row['rollno']."</td>";
             echo"<td><input type='text' name='a[]' class='tc' id='$k' /></td>";
             echo"<td><input type='text' name='b[]' id='$k' /></td>";
              echo"</tr>";
            }
           echo"</table>";
          ?>
        </body>
       </html>

Shiladitya · Accepted Answer · 2017-09-07 12:26:37Z

1

Here you go with an example solution https://jsfiddle.net/6mxo5zu1/

$('input[type="text"]').change(function(){
  var that = this;
  $(this).nextAll('input[type="text"]').each(function(){
    $(this).val($(that).val());
  });
  
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<input type="text" id="text-1" />
<input type="text" id="text-2" />
<input type="text" id="text-3" />
<input type="text" id="text-4" />
<input type="text" id="text-5" />
<input type="text" id="text-6" />
<input type="text" id="text-7" />
<input type="text" id="text-8" />
<input type="text" id="text-9" />
<input type="text" id="text-10" />
<input type="text" id="text-11" />
<input type="text" id="text-12" />

I've 12 input textbox with unique id attached to it.

One of the textbox value changes then rest of the input textbox value will updated only the next not the previous.

No need of using id over here.

Hope this will help you.

answered Sep 7, 2017 at 12:26

Shiladitya

12.2k17 gold badges29 silver badges43 bronze badges

Sign up to request clarification or add additional context in comments.

1 Comment

Shiladitya Over a year ago

Your statement "its not working" is very vague. Can you elaborate what is not working?

Karol Selak · Accepted Answer · 2017-09-07 12:18:50Z

0

Just set unique ids for your inputs (let's say, in form like input_0, input_1 etc.) and try loop it like this:

for (var i=first_index_to_modify; i<=last_index_to_modify; i++) {
  $('#input_'+i).val('myval');
}

answered Sep 7, 2017 at 12:18

Karol Selak

4,8848 gold badges42 silver badges69 bronze badges

Comments

Shahbaz · Accepted Answer · 2017-09-07 12:21:45Z

0

I see your inputs are having sequential ids like 1 ,2 ,3, and so on.

you can simply do it this way.

var i = 0;
for(i = 1;i <$('.tc').length; i++ ) {
    if ($('.tc')[i].attr('id') >= id) {
        $('.tc')[i].val(val);
    }
}

answered Sep 7, 2017 at 12:21

Shahbaz

3922 silver badges5 bronze badges

Collectives™ on Stack Overflow

update the next inputs with different ids with the same value

3 Answers 3

1 Comment

Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

1 Comment

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related