auto fill input form array

Question

the code below will auto fill 2 input form based in from another input.. right now its working but only for the first loop..its not working on second and third loop

..i know we have to use something like array but im not sure how to do this..

 <script>
   $(document).ready(function() {
    $('#totalofservices').keyup(function(){
       $("#totalontarget").val($(this).val());
    $("#totalofftarget").val("0");
 });
});
 </script>

 for($x=1; $x<=3; ++$x)
{
    echo "<tr>
      <td>Zone $x</td>
      <td><input style='text-align:center' class='form-control' type='text' size='20' id='totalofservices' name='totalofservices'>
      </td>
      <td><input style='text-align:center' class='form-control' type='text' size='20' id='totalontarget' name='totalontarget'></td>
      <td><input style='text-align:center' class='form-control' type='text' size='20' id='totalofftarget' name='totalofftarget'></td>


    </tr>";
}

You're going to have to clarify the question a little better. — Difster
– Difster, Commented Jul 3, 2017 at 5:30

prasanth · Accepted Answer · 2017-07-03 05:33:22Z

No need a array .Try with class Name instead of id .because the whole document id is unique .Closest() it will target the tr .find() use to find the children

<script>
   $(document).ready(function() {
    $('.totalofservices').keyup(function(){
       $(this).closest('tr').find(".totalontarget").val($(this).val());
    $(this).closest('tr').find(".totalofftarget").val("0");
 });
});
 </script>

 for($x=1; $x<=3; ++$x)
{
    echo "<tr>
      <td>Zone $x</td>
      <td><input style='text-align:center' class='form-control totalofservices' type='text' size='20' id='totalofservices' name='totalofservices'>
      </td>
      <td><input style='text-align:center' class='form-control totalontarget' type='text' size='20' id='totalontarget' name='totalontarget'></td>
      <td><input style='text-align:center' class='form-control totalofftarget' type='text' size='20' id='totalofftarget' name='totalofftarget'></td>


    </tr>";
}

Rohan Kumar · Accepted Answer · 2017-07-03 05:31:54Z

Firstly, id must be unique and to achieve this use class instead of id Secondly, if you want to use those inputs at server side then make array of input fields like,

$(document).ready(function() {
  $('.totalofservices').keyup(function() {
    var tr = $(this).closest('tr');
    tr.find(".totalontarget").val($(this).val());
    tr.find(".totalofftarget").val("0");
  });
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<table>
  <tr>
    <td>Zone 1</td>
    <td><input style='text-align:center' class='form-control totalofservices' type='text' size='20'  name='totalofservices[]'>
    </td>
    <td><input style='text-align:center' class='totalontarget form-control' type='text' size='20'  name='totalontarget[]'></td>
    <td><input style='text-align:center' class='totalofftarget form-control' type='text' size='20'  name='totalofftarget[]'></td>
  </tr>
  <tr>
    <td>Zone 2</td>
    <td><input style='text-align:center' class='totalofservices form-control' type='text' size='20' name='totalofservices[]'>
    </td>
    <td><input style='text-align:center' class='totalontarget form-control' type='text' size='20' name='totalontarget[]'></td>
    <td><input style='text-align:center' class='totalofftarget form-control' type='text' size='20' name='totalofftarget[]'></td>
  </tr>
  <tr>
    <td>Zone 3</td>
    <td><input style='text-align:center' class='totalofservices form-control' type='text' size='20' name='totalofservices[]'>
    </td>
    <td><input style='text-align:center' class='totalontarget form-control' type='text' size='20' name='totalontarget[]'></td>
    <td><input style='text-align:center' class='totalofftarget form-control' type='text' size='20'  name='totalofftarget[]'></td>
  </tr>
</table>

Collectives™ on Stack Overflow

auto fill input form array

2 Answers 2

Comments

1 Comment

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

Comments

1 Comment

Your Answer

Sign up or log in

Post as a guest

Related