jquery forms calculation from array of inputs

Hi

I have a form that can have any number of inputs, they are displayed on the page depending on how many items in this category.. could be 1 or could be 15 or anywhere inbetween.

<input type='text' name='productname[]' />
<input type='text' name='qty[]' />
<input type='text' name='price[]' />

Open in new window




AT the bottom  of the form I have a span to hold the 'total value'

<span class='totalvalue'></span>

Open in new window



when a user enters a figure into the qty textbox, I need it to update the total at the bottom...

how the form looks
Any ideas?

Cheers
cycledudeAsked:
Who is Participating?

Improve company productivity with a Business Account.Sign Up

x
 
cycledudeConnect With a Mentor Author Commented:
sorry for the delay

heres what I did, which may help others, based on your code, but I just simplified it a little..

	$('input.qty').change(function () {
		var totalValue = 0;
		$('input.qty').each(function () {
			var qty = 0;
			var price = parseFloat($(this).attr('data-price'));
			qty = parseInt($(this).val()) || 0;
			
			totalValue += qty * price;
			
		});
		
		
		$('.totalprice').html('£' + totalValue);
		$('.formtotal').val(totalValue);
	})

Open in new window

0
 
Scott Fell, EE MVEConnect With a Mentor Developer & EE ModeratorCommented:
There are a lot of ways to attack this.  If you are controlling the server side code, I like to make use of the data-attribute properties.  This makes it easier to see what is going on.

You will have to do some front end work to make this pretty.  Here is a live sample to the below code http://jsbin.com/ziwakaku/1/edit?html,js,output

HTML
<!DOCTYPE html>
<html>
<head>
<script src="http://code.jquery.com/jquery-1.11.0.min.js"></script>
  <meta charset="utf-8">
  <title>padas Q_28406036</title>
</head>
<body>
<div class="product">
  ABC123 £5.00
<input type='text' name='qty' data-product="abc123" data-price='5' />
</div>
  <div class="product">
  XYZ789 £10.00
<input type='text' name='qty' data-product='XYZ789' data-price='10'/>

</div>
  <div class="product">
  MNO356 £3.00
<input type='text' name='qty' data-product='MNO356' data-price='3' />

</div>

  <div class='totalvalue'></div>
</body>
</html>

Open in new window

JQUERY
function calcTotal(product) {

    var price = $('input[data-product="' + product + '"]').attr('data-price');
    var qty = $('div.product input[data-product="' + product + '"]').val();
    if (qty !== '') {
        return price * qty;

    } else {
        return '0';
    }

}



$(function() {
$('input[name="qty"]').change(function () {
    var totalValue = 0;
    $('input[name="qty"]').each(function () {
        var product = $(this).attr('data-product');
        totalValue += parseInt(calcTotal(product), 10);

    });
 
    $('.totalvalue').html('Total £' + totalValue);
});
});  

Open in new window

0
 
cycledudeAuthor Commented:
thanks, i will give it a try
0
 
cycledudeAuthor Commented:
Great stuff thanks for the help ;o)
0
Question has a verified solution.

Are you are experiencing a similar issue? Get a personalized answer when you ask a related question.

Have a better answer? Share it in a comment.

All Courses

From novice to tech pro — start learning today.