javascript - Jquery multiplication of two column value in table with form repeater

Question

I have below HTML for table row, each row getting added with form-repeater, so it will append [0], [1] on each row input name attributes,

Now I have on more input with read-only billitem_total, where I need multiplication of billitem_quntity and billitem_rate

<tr data-repeater-item="" name="line_items" style="">
 <td>
  <a href="javascript:;" data-repeater-delete="" class="btn btn-sm font-weight-bolder btn-light- 
  danger"><i class="la la-trash-o"></i></a>
 </td>
 <td>
  <input type="text" name="[0][billitem_quantity]" class="form-control" 
   placeholder="Quantity" value="12">
 </td>
 <td>
  <input type="text" name="[0][billitem_rate]" class="form-control" 
  placeholder="Rate" value="5">
 </td>
 <td>
  <input readonly="" type="text" name="[0][billitem_total]" id="billitem_total" class="form- 
    control" style="border: 0;" value="" placeholder="Item name"> 
 </td>
</tr>

How can I do multiplication with help of Jquery for each repeating rows?

Thank you :-)

标签： javascripthtmljquery

Answer 1

if your data is dynamic means your row will repeat then instead of giving Id's to the inputs give class to the inputs.

<input type="text" name="[0][billitem_quantity]" class="form-control billitem-quantity" placeholder="Quantity" value="12">
<input type="text" name="[0][billitem_rate]" class="form-control billitem-rate" placeholder="Rate" value="5">
<input readonly="" type="text" name="[0][billitem_total]" class="form-control billitem-total" style="border: 0;" value="" placeholder="Item name"> 

You can chose your event according to your requirement. But keyup will be the better option according to me in your case

$('.billitem-quantity, .billitem-rate').on('keyup', function() { 
        const quantity = $(this).closest('tr').find('.billitem-quantity')first().val();
        const rate = $(this).closest('tr').find('.billitem-rate').first().val();
        // Assign the total to the total
        $(this).closest('tr').find('.billitem-total').first().val(parseFloat(quantity) * parseFloat(rate));
});