0

I built a script which is clone every child rows from the parent typing on a checkbox checked here.

It was working until now. I want each child input value to be saved by ajax. But only the last child is echoed.

JS

function cloneAllz(clsName) {
  var $input1 = $('.prdEdt').find('td.' + clsName + ' input[type="text"]').filter(':visible:first'); //master input
  //console.log($input1.attr('id'));//test master input
  $input1.on('input', function() {
    var $this = $(this);
    window.setTimeout(function() {
      if ($('input.' + clsName).is(':checked')) {
        var $child = $('.prdEdt').find('td.' + clsName + ' input[type="text"]');
        $child.val($this.val()).attr('readonly', true).each(function() { //how to loop each input in the column???
          console.log($this.attr('id'));
        });

        $input1.attr('readonly', false);
      } else {
        $('.prdEdt').find('td.' + clsName + ' input[type="text"]').removeAttr('readonly', ); //remove readonly
      }
    }, 0);
  });
}

HTML

<table class="table table-bordered table-striped prdEdt">
  <tr>
    <th>ID</th>
    <th>Code
      <label class="pull-right label label-default">
        <input type="checkbox" class="cde" onChange="cloneAllz('cde')" /> <em class="fa fa-clone"></em></label>
    </th>
    <th>Title
      <label class="pull-right label label-default">
        <input type="checkbox" class="tt_en" onChange="cloneAllz('tt_en')" /> <em class="fa fa-clone"></em></label>
    </th>
    <th>Cost</th>
  </tr>
  <tr>
    <td>00067</td>
    <td class="cde">
      <input type="text" name="prd_cde" id="prd_cde|67" class="form-control" value="3000009" />
    </td>
    <td class="tt_en">
      <input type="text" name="prd_title_en" id="prd_title_en|67" class="form-control" value="TRANSFER KRABI AIRPORT-AO NANG" />
    </td>
    <td>
      <input type="number" name="prd_cost" id="prd_cost|67" class="form-control" value="800" />
    </td>
  </tr>
  <tr>
    <td>00068</td>
    <td class="cde">
      <input type="text" name="prd_cde" id="prd_cde|68" class="form-control " value="3000009" />
    </td>
    <td class="tt_en">
      <input type="text" name="prd_title_en" id="prd_title_en|68" class="form-control " value="TRANSFER KRABI AIRPORT-AO NANG " />
    </td>
    <td>
      <input type="number" name="prd_cost" id="prd_cost|68" class="form-control" value="600" />
    </td>
  </tr>
</table>

So the question is : How to echo each row input to save them data via ajax???

function cloneAllz(clsName) {
  var $input1 = $('.prdEdt').find('td.' + clsName + ' input[type="text"]').filter(':visible:first'); //master input
  //console.log($input1.attr('id'));//test master input
  $input1.on('input', function() {
    var $this = $(this);
    window.setTimeout(function() {
      if ($('input.' + clsName).is(':checked')) {
        var $child = $('.prdEdt').find('td.' + clsName + ' input[type="text"]');
        $child.val($this.val()).attr('readonly', true).each(function() { //how to loop each input in the column???
          console.log($this.attr('id'));//only first row echoed twice!
        });

        $input1.attr('readonly', false);
      } else {
        $('.prdEdt').find('td.' + clsName + ' input[type="text"]').removeAttr('readonly', ); //remove readonly
      }
    }, 0);
  });
}
<link href="https://netdna.bootstrapcdn.com/font-awesome/4.4.0/css/font-awesome.min.css" rel="stylesheet" />
<link href="https://netdna.bootstrapcdn.com/bootstrap/3.0.0/css/bootstrap.min.css" rel="stylesheet" />
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<table class="table table-bordered table-striped prdEdt">
  <tr>
    <th>ID</th>
    <th>Code
      <label class="pull-right label label-default">
        <input type="checkbox" class="cde" onChange="cloneAllz('cde')" /> <em class="fa fa-clone"></em></label>
    </th>
    <th>Title
      <label class="pull-right label label-default">
        <input type="checkbox" class="tt_en" onChange="cloneAllz('tt_en')" /> <em class="fa fa-clone"></em></label>
    </th>
    <th>Cost</th>
  </tr>
  <tr>
    <td>00067</td>
    <td class="cde">
      <input type="text" name="prd_cde" id="prd_cde|67" class="form-control" value="3000009" />
    </td>
    <td class="tt_en">
      <input type="text" name="prd_title_en" id="prd_title_en|67" class="form-control" value="TRANSFER" />
    </td>
    <td>
      <input type="number" name="prd_cost" id="prd_cost|67" class="form-control" value="800" />
    </td>
  </tr>
  <tr>
    <td>00068</td>
    <td class="cde">
      <input type="text" name="prd_cde" id="prd_cde|68" class="form-control " value="3000009" />
    </td>
    <td class="tt_en">
      <input type="text" name="prd_title_en" id="prd_title_en|68" class="form-control " value="TRANSFER" />
    </td>
    <td>
      <input type="number" name="prd_cost" id="prd_cost|68" class="form-control" value="600" />
    </td>
  </tr>
</table>
Wilf
  • 2,297
  • 5
  • 38
  • 82
  • in your `each`, call `$(this)` to get the current object of the loop. `$this` will be the target of the `input` event. – Kaiido Sep 12 '17 at 01:24
  • I tested with `console.log($this.attr('id'));` but only the first row coming out. – Wilf Sep 12 '17 at 01:25
  • 1
    I said `$(this)` not `$this`. – Kaiido Sep 12 '17 at 01:27
  • Possible duplicate of [how to get data from each li using jquery each function?](https://stackoverflow.com/questions/39010485/how-to-get-data-from-each-li-using-jquery-each-function) or even better: [jquery get the input value in an each loop](https://stackoverflow.com/questions/10668623/jquery-get-the-input-value-in-an-each-loop) – Kaiido Sep 12 '17 at 01:28

0 Answers0