Jquery: How multiplication of two fields by closest classname?

Question

I have dynamic table where button on click add a new table row. On each row there is price, qty and total price input field. I want that when user put value on qty field, it will multiply price and qty and show on total price input.

My Code:

$(document).ready(function(){
var product = '
<tr>
   <td>
      <select name="product_id" class="form-control" id="product-name">
         <option value="" selected disabled>Select Product</option>
         @foreach($product as $row) 
         <option value="{{$row->id}}">{{$row->product_name}}</option>
         @endforeach 
      </select>
   </td>
   <td><input type="number" name="p_price[]" class="form-control p_price"></td>
   <td><input type="number" name="p_qty[]" class="form-control qty" ></td>
   <td><input type="number" name="p_total" class="form-control t_price" ></td>
   <td><button class="btn btn-danger delete theme-danger btn-xs"><i class="fa fa-times" aria-hidden="true"></i></button></td>
</tr>
'; 
   $("#productAdd").click(function(){
      $('#product-table tbody').append(product);
   });
   $(document).on('click','.delete',function(){
      $(this).parents('tr').remove();
   });

   $(function() {
      $(document)
          .on('input', '.qty');
         $('.t_price').val($('.p_price').val() * $('.qty').val());
   });
   
});

How can I calculate each row value?

Please click [edit], then `[<>]` and provide a [mcve] WITHOUT server code — mplungjan, Oct 27 '22 at 19:08

mplungjan · Accepted Answer · 2022-10-27T19:19:35.487

You had the right idea

Note: Removed the ID
Delegate from tbody instead of document
Hide the first delete

$(function() {
  const $tb = $('#product-table tbody');
  $(".delete").eq(0).hide()
  $("#productAdd").on("click",function() {
    const $row = $tb.find("tr").eq(0).clone();
    $(".delete",$row).show(); // show the hidden delete on this row
    $row.find("select").val(""); // reset the select
    $row.find("[type=number]").val(0); // reset the numbers
    $tb.append($row);
  });
  $tb.on('click', '.delete', function() {
    $(this).parents('tr').remove();
  });
  $tb.on('input', '.qty', function() {
    const $row = $(this).closest("tr");
    $('.t_price',$row).val($('.p_price',$row).val() * $('.qty',$row).val());
  });
});

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<button id="productAdd">ADD</button>
<table id="product-table">
  <tbody>
    <tr>
      <td>
        <select name="product_id" class="form-control">
          <option value="" selected disabled>Select Product</option>
          <option value="1">Product 1</option>
          <option value="2">Product 2</option>
          <option value="3">Product 3</option>
        </select>
      </td>
      <td><input type="number" name="p_price[]" class="form-control p_price"></td>
      <td><input type="number" name="p_qty[]" class="form-control qty"></td>
      <td><input type="number" name="p_total" class="form-control t_price"></td>
      <td><button class="btn btn-danger delete theme-danger btn-xs"><i class="fa fa-times" aria-hidden="true"></i></button></td>
    </tr>
  </tbody>
</table>

It works. But I need to hide the first row also. This field is optional. So there will be empty row. If click on add button it will add row. Otherwise the table will be empty. — Farlar, Oct 28 '22 at 15:11
If I hide the first tr of that table by CSS, will it be appropriate? — Farlar, Oct 28 '22 at 15:29
Sure. You can also change `$("tr",$tb).eq(0).hide()` and then `$row).show();` — mplungjan, Oct 29 '22 at 06:20
Thanks. Can you help me with another question please? Link: [https://stackoverflow.com/q/74252116/19709489] — Farlar, Oct 30 '22 at 10:17

Jquery: How multiplication of two fields by closest classname?

1 Answers1