How to read current table row input box using jquery

Question

I'm trying to select the current row <td> tag input value, when check box is selected for that particular row, but it returns null.

I've tried to fetch the current row and I got it to read the value of input box of the selected checkbox row

var allVals = [];
$('input[name=selectedBilties]:checked').each(function() {
   var  freight_id = $(this).closest('tr').find( $('input[name="freight_id[]"]') ).val();
   allVals.push($(this).val());
   allVals.push(freight_id);
});
console.log("All Values"+ allVals);

html table with php->codeigniter

<table id="example1" class="table table-bordered table-striped table-sm" style=" overflow: auto;  ">
   <thead class="bg-info">
      <tr>
         <th>Select</th>
         <th>Bilty No</th>
         <th>Bilty Date</th>
         <th>Pkgs</th>
         <th>weight</th>
         <th>From</th>
         <th>TO</th>
         <th>Consignor</th>              
         <th>Consignee</th>
         <th>Remark</th>
      </tr>
   </thead>

   <tbody class="table-hover">
      <?php foreach($crossing as $pod){?>
      <tr>
         <td><input type="checkbox" id="selectedBilties" name="selectedBilties" value="<?php echo $pod->id;?>"></td>
         <td><?php echo $pod->id;?></td>
         <td><?php echo $pod->lr_date;?></td>
         <td><?php echo $pod->no_of_pkgs;?></td>
         <td><?php echo $pod->lr_actual_weight;?></td>
         <td><?php echo $pod->lr_from;?></td>
         <td><?php echo $pod->lr_to;?></td>
         <td><?php echo $pod->consignor_name;?></td>
         <td><?php echo $pod->consignee_name;?></td>
         <td><?php echo $pod->lr_description;?></td>
         <input class="selected" type="text" id="freight_id" name="freight_id[]" value="<?php echo $pod->fr_memo_ids; ?>">
         <input class="selected" type="hidden" id="challan_id" name="challan_id[]" value="<?php echo $pod->challan_id; ?>">
      </tr>
      <?php }?>
   </tbody>
</table>

How is your HTML looks like? what are the issues you are facing? — Mamun, Feb 10 '19 at 10:18

Mamun · Accepted Answer · 2019-02-10T13:31:56.977

You have to place the input elements inside td, otherwise the selector will not work. Also you have to execute your code on changing the check box as there is no check box checked initially:

$('input[name=selectedBilties]').click(function(){
  var allVals  = [];
  $('input[name=selectedBilties]:checked').each(function() {
    
    var  freight_id = $(this).closest('tr').find('input[name="freight_id[]"]').val();
    var temp = [];
    temp.push($(this).val());
    temp.push(freight_id);
    allVals.push(temp);
  });
  console.log(allVals);
});

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<table id="example1" class="table table-bordered table-striped table-sm" style=" overflow: auto;  ">
  <thead class="bg-info">
    <tr>
      <th>Select</th>
      <th>Bilty No</th>
      <th>Bilty Date</th>
      <th>Pkgs</th>
      <th>weight</th>
      <th>From</th>
      <th>TO</th>
      <th>Consignor</th>              
      <th>Consignee</th>
      <th>Remark</th>
    </tr>
  </thead>

  <tbody class="table-hover">
    <tr>
      <td><input type="checkbox" id="selectedBilties" name="selectedBilties" value="11"></td>
      <td>gjhg</td>
      <td>ghj</td>
      <td>ghjg</td>
      <td>ghj</td>
      <td>ghjg</td>
      <td>ghj</td>
      <td>gjh</td>
      <td>ghj</td>
      <td>ghj</td>
      <td><input class="selected" type="text" id="freight_id" name="freight_id[]" value="val11"></td>
      <td><input class="selected" type="hidden" id="challan_id" name="challan_id[]" value="<?php echo $pod->challan_id; ?>"></td>
    </tr>
    <tr>
      <td><input type="checkbox" id="selectedBilties" name="selectedBilties" value="22"></td>
      <td>vbv</td>
      <td>gh</td>
      <td>gjh</td>
      <td>gh</td>
      <td>ghj</td>
      <td>ghj</td>
      <td>ghj</td>
      <td>ghj</td>
      <td>gjghj</td>
      <td><input class="selected" type="text" id="freight_id" name="freight_id[]" value="val22"></td>
      <td><input class="selected" type="hidden" id="challan_id" name="challan_id[]" value=""></td>
    </tr>
  </tbody>
</table>

thanks for the answer , how can I make these values like associate array or 2d array @Mamun — Khan Muntazar, Feb 10 '19 at 13:51
@KhanMuntazar, the answer is now in 2D array.....example of 2D array here https://stackoverflow.com/questions/966225/how-can-i-create-a-two-dimensional-array-in-javascript — Mamun, Feb 10 '19 at 13:54

How to read current table row input box using jquery

1 Answers1