Solved

jquery forms calculation from array of inputs

Posted on 2014-04-06
4
859 Views
Last Modified: 2014-04-24
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
0
Comment
Question by:cycledude
[X]
Welcome to Experts Exchange

Add your voice to the tech community where 5M+ people just like you are talking about what matters.

  • Help others & share knowledge
  • Earn cash & points
  • Learn & ask questions
  • 3
4 Comments
 
LVL 53

Assisted Solution

by:Scott Fell, EE MVE
Scott Fell,  EE MVE earned 500 total points
ID: 39980985
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
 

Author Comment

by:cycledude
ID: 39989812
thanks, i will give it a try
0
 

Accepted Solution

by:
cycledude earned 0 total points
ID: 40010638
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
 

Author Closing Comment

by:cycledude
ID: 40019505
Great stuff thanks for the help ;o)
0

Featured Post

Stressed Out?

Watch some penguins on the livecam!

Question has a verified solution.

If you are experiencing a similar issue, please ask a related question

DOM Attributes and Properties treatment with jQuery 1.6 by Ivo Stoykov jQuery (http://jquery.com/) 1.6 introduces .prop() (http://api.jquery.com/prop/) and .removeProp() (http://api.jquery.com/removeProp/) methods which allow modifying or removi…
I found this questions asking how to do this in many different forums, so I will describe here how to implement a solution using PHP and AJAX. The logical flow for the problem should be: Write an event handler for the first drop down box to get …
The viewer will learn the basics of jQuery, including how to invoke it on a web page. Reference your jQuery libraries: (CODE) Include your new external js/jQuery file: (CODE) Write your first lines of code to setup your site for jQuery.: (CODE)
The viewer will learn the basics of jQuery including how to code hide show and toggles. Reference your jQuery libraries: (CODE) Include your new external js/jQuery file: (CODE) Write your first lines of code to setup your site for jQuery…

695 members asked questions and received personalized solutions in the past 7 days.

Join the community of 500,000 technology professionals and ask your questions.

Join & Ask a Question