Jump to content

Maths on dynamically created form


 Share

Go to solution Solved by Barand,

Recommended Posts

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.

Link to comment
Share on other sites

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);
		})
			
	}

 

Link to comment
Share on other sites

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...

Link to comment
Share on other sites

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.

Link to comment
Share on other sites

  • Solution

@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);
    })
}

 

Link to comment
Share on other sites

Join the conversation

You can post now and register later. If you have an account, sign in now to post with your account.

Guest
Reply to this topic...

×   Pasted as rich text.   Restore formatting

  Only 75 emoji are allowed.

×   Your link has been automatically embedded.   Display as a link instead

×   Your previous content has been restored.   Clear editor

×   You cannot paste images directly. Upload or insert images from URL.

 Share

×
×
  • Create New...

Important Information

We have placed cookies on your device to help make this website better. You can adjust your cookie settings, otherwise we'll assume you're okay to continue.