CODEWITHSUNDEEP
jqueryforms
bart2puck
bart2puck

Reputation: 2522

checkbox adds value to the next input in a table

I have a table with a field for default quantity. I then have dozens of rows of items, if a user clicks checkbox, i want to take the default value and add it to the qty input of that row.

<tr>
    <td><input type='text' id='defQty' name='defQty' size='4'></td>
</tr>

<tr>
    <th style='text-align:center'><input type='checkbox' name='itemsCB[]' class='itemActivate'></th>
    <th><input type='text' name='qtys[]' size='3' class='qty'></th>
</tr>

is my table..

my jquery:

$('.itemActivate').change( function(){
    if ($(this).is(':checked')) {
        var qty = $('#defQty').val();
        $(this).nextAll('input:first').val(qty);
    }
});

in this code, nothing happens....

Upvotes: 0

Views: 44

Answers (2)

PeterKA
PeterKA

Reputation: 24638

As already mentioned, the correct methods to use are: .closest() and .find()

You may also want to reset the .qty input elements in case the corresponding checkbox is unchecked. The following line will do just that:

$(this).closest('tr').find('.qty').val( this.checked ? qty: "" );

See demo below.

$(function() {
  $('.itemActivate').change( function() {
    var qty = $('#defQty').val();
    $(this).closest('tr').find('.qty').val( this.checked ? qty: "" );
  });
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<table>
<tr>
    <th>DEFAULT VALUE</th><td><input type='text' id='defQty' name='defQty' size='4' value="79"></td>
</tr>

<tr>
    <th style='text-align:center'><input type='checkbox' name='itemsCB[]' class='itemActivate'></th>
    <th><input type='text' name='qtys[]' size='3' class='qty'></th>
</tr>

<tr>
    <th style='text-align:center'><input type='checkbox' name='itemsCB[]' class='itemActivate'></th>
    <th><input type='text' name='qtys[]' size='3' class='qty'></th>
</tr>

<tr>
    <th style='text-align:center'><input type='checkbox' name='itemsCB[]' class='itemActivate'></th>
    <th><input type='text' name='qtys[]' size='3' class='qty'></th>
</tr>

<tr>
    <th style='text-align:center'><input type='checkbox' name='itemsCB[]' class='itemActivate'></th>
    <th><input type='text' name='qtys[]' size='3' class='qty'></th>
</tr>

<tr>
    <th style='text-align:center'><input type='checkbox' name='itemsCB[]' class='itemActivate'></th>
    <th><input type='text' name='qtys[]' size='3' class='qty'></th>
</tr>
</table>

Upvotes: 0

Tyler Roper
Tyler Roper

Reputation: 21672

.nextAll() fetches siblings. Your .itemActivate checkbox has no siblings.

Consider getting the parent row using .closest(), and finding the input within using .find():

$('.itemActivate').change(function() {
  if ($(this).is(':checked')) {
    var qty = $('#defQty').val();
    $(this).closest('tr').find("input.qty").val(qty);
  }
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<table>
  <tr>
    <td>Default qty:</td>
    <td><input type='text' id='defQty' name='defQty' size='4'></td>
  </tr>

  <tr>
    <th style='text-align:center'><input type='checkbox' name='itemsCB[]' class='itemActivate'></th>
    <th><input type='text' name='qtys[]' size='3' class='qty'></th>
  </tr>
  <tr>
    <th style='text-align:center'><input type='checkbox' name='itemsCB[]' class='itemActivate'></th>
    <th><input type='text' name='qtys[]' size='3' class='qty'></th>
  </tr>
  <tr>
    <th style='text-align:center'><input type='checkbox' name='itemsCB[]' class='itemActivate'></th>
    <th><input type='text' name='qtys[]' size='3' class='qty'></th>
  </tr>
</table>

Upvotes: 1

Related Questions