Maths on dynamically created form

[Adamhumbug]

I have a form that creates new rows on a button click - i am wanting to do maths on these rows.

The form when created has the following html and new rows create mostly the same thing (just the data in the drop down differs).

<div class="row mb-3 completeLine">
  <div class="col-1">
    <select name="itemQty[]" class="itemQty form-select">
      <option value="1">1</option>
      <option value="2">2</option>
      <option value="3">3</option>
      <option value="4">4</option>
      <option value="5">5</option>

    </select>
  </div>
  <div class="col-4">
    <select name="itemSelected[]" class="itemSelected form-select">
      <option data-priceuk="1000000" value="1">Annual AllowMe Licence</option>
      <option data-priceuk="300000" value="2">Single Event Licence</option></select>
  </div>
  <div class="col-2">
    <input name="fromDate" type="date" class="form-control from-date">
  </div>
  <div class="col-2">
    <input name="toDate" type="date" class="form-control to-date">
  </div>
  <div class="col-2">
    <input name="lineTotal" type="text" disbaled="" placeholder="Total" class="line-total form-control">
  </div>
  <div class="col-1">
    <div class="btn btn-primary w-100">Opt</div>
  </div>
  <div class="col-12 mt-3">
    <div class="input-group mb-3">
      <span class="input-group-text">Notes</span>
      <input name="lineNotes" type="text" class="line-notes form-control" placeholder="Add notes for line item">
    </div>
  </div>
</div>

I am wanting to multiply the quanity on each line by the value of the item.

The bit i am struggling to remember is how to write the JQ to select the items from each line to multiply, i will be wanting to add on change events to these also.

Each line gets a completeLine class

I am thinking it will be a for each with a find but i cant string it together.

[Adamhumbug]

I think i have made a pretty solid start

 

	function calcLineTotal(){
		$('.completeLine').each(function(){
			$(this).find($('.itemQty')).each(function(){
				var qty = $(this).val();
				console.log(qty)
			})
		})
			
	}

 

[Adamhumbug]

I have got to this stage but i am getting qty is not defined when i try and set the linetotal box

	function calcLineTotal(){
		$('.completeLine').each(function(){
			$(this).find($('.itemQty')).each(function(){
				var qty = $(this).val();
				console.log(qty)
			})
			$(this).find($('.itemSelected option:selected')).each(function(){
				var item = $(this).data('priceuk')
				console.log(item)
			})
			var linetotal = qty * item;
			$(this).find($('.lineTotal')).val(linetotal);
		})
			
	}

 

[Adamhumbug]

I am actually getting undefined variable on both qty and item.

The console logs indicate that they are set and they are all set in the same function so i am a bit lost.

I am not sure that what i am doing is the best way of going about this...

[mac_gyver]

without complete copy/paste code to run this ourselves, no one here can help. anything we do to get the snippets of code to the point of even running, may be different enough that it won't help you.

[mac_gyver]

give this a try -

<script>
$(document).on("change", ".itemQty,.itemSelected", function(){
	var parent = $(this).closest('.completeLine');
	var qty = parent.find('.itemQty option:selected').val();
	var price = parent.find('.itemSelected option:selected').data('priceuk');
	parent.find('.line-total').val(qty*price);
});
</script>

also, the first option choice is usually a instructional prompt, with an empty value, so that the user must make a deliberate selection. this also allows the 'required' attribute to work.

[Barand]

@Adamhumbug Your code appeared to be trying to calculate all totals in a loop (eg on button click)

<button onclick='calculate()'>Calculate all totals</button>

script

function calculate()
{
    $.each($(".completeLine"), function(k, v) {
        var qty = $(v).find('.itemQty option:selected').val();
        var price = $(v).find('.itemSelected option:selected').data('priceuk');
        $(v).find('.line-total').val(qty*price);
    })
}

 

[Adamhumbug]

Thanks all for your feedback.

@mac_gyver and @Barand - both of your solutions worked perfectly out of the box so that is very much appreciated.

Edited June 19, 2022 by Adamhumbug