0

I have a section in a form of inputs, quanitity, price and tax.

I can add them together for 1 row fine, where I get stuck is per additional row.

JSfiddle: https://jsfiddle.net/q1bL94jt/1/

html:

<div class="prod-row-wrap">
 <div class="prod-new-row">
  <div class="prod-name">
   <select class="form-control" name="prod_name[]">
    <option value="x">Platinum subscription</option>
   </select>
  </div>
  <div class="prod-quan">
   <input type="text" name="quantity" class="form-control" />
  </div>
  <div class="prod-price">
    <input type="text" name="price" class="form-control" />
  </div>
  <div class="prod-tax">
    <input type="text" name="tax" class="form-control" />
  </div>
  <div class="prod-total">
    <p>&pound; <span class="total">0</span></p>
  </div>
  <div class="prod-delete">
    <a href="#" class="remove_field">Remove</a>
  </div>
 </div>
 <button class="btn btn-lg add_product_button">Add product</button>
</div>

JS

$('[name="tax"]').on('input', function() {
 var quantity = $('[name="quantity"]').val();
 var price = $('[name="price"]').val();
 var tax = $('[name="tax"]').val();
 var subtotal = quantity * price;
 var tax_total = (subtotal / 100) * tax;
 var total = subtotal + tax_total;
 $('.total').text(total);
});

My amended code (which doesn't work) is:

$('.prod-new-row').each(function() {
 $('[name="tax"]', this).on('input', function() {
  var quantity = $('[name="quantity"]').val();
  var price = $('[name="price"]' ).val();
  var tax = $('[name="tax"]').val();
  var subtotal = quantity * price;
  var tax_total = (subtotal / 100) * tax;
  var total = subtotal + tax_total;
  $('.total').text(total);
 });
});

Thanks in advance for any pointers.

Gareth Gillman
  • 343
  • 1
  • 4
  • 20
  • What "doesn't work" about it? In what specific way does this code fail? – David Aug 21 '17 at 10:49
  • It only adds the prices up for the first row, nothing happens on the second row - see https://jsfiddle.net/q1bL94jt/2/ – Gareth Gillman Aug 21 '17 at 10:51
  • I think you need use `parseInt` – asdf_enel_hak Aug 21 '17 at 10:53
  • 1
    Note: Even after correcting the event binding as per the linked duplicate, there's at least another error in this code as well. When you have multiple inputs with the same name, which one do you expect something like `$('[name="quantity"]').val()` to get? You need to specify which one you want, likely as a DOM traversal relative to the element invoking the event. – David Aug 21 '17 at 10:54

0 Answers0