I am creating a online calculation tool, and have a row of drop downs each with a variety of values.
I have the following code
function calculateTotal(){
var total = 0;
$(":select:selected").each(function(){
total += Number($(this).data("value"));
});
$("#total").text("£" + total);
$('#totalHidden').val(total);
}
$("#150x150").change(function () {
calculateTotal();
//calculateDisplay()
});
And this is one of the drop downs
<select class="field size2" name="Size" id="150x150">
<option data-value="24.95">24.95</option>
<option data-value="25.95">25.95</option>
<option data-value="26.95">26.95</option>
<option data-value="27.95">27.95</option>
</select>
Basically on selection of a value in the drop down the value adds up, but its not working.
Just thinking and not sure if this is the right way to do it anyway…
As will have around 10-15 drop downs and each one will have a value associated with it, and all 10 may need adding together.
But will see about getting the drop down value to total first and see
OK I have my intial question sorted using
$("#150x150").change(function () {
var total = $(':selected',this).data('value');
$("#total").text("£" + total);
$('#totalHidden').val(total);
});
<select name="Size" id="150x150">
<option data-value="24.95">24.95</option>
<option data-value="25.95">25.95</option>
<option data-value="26.95">26.95</option>
<option data-value="27.95">27.95</option>
</select>
As I select a drop down value, the value shows up in the text field.
Now my next step is how to keep hold of that value, and then ad the value from the next drop down to it.
Such as
<select name="Size" id="200x200">
<option data-value="24.95">24.95</option>
<option data-value="25.95">25.95</option>
<option data-value="26.95">26.95</option>
<option data-value="27.95">27.95</option>
</select>
So as expected this sort of manouvere isnt going to work.
function calculateTotal(){
var total = 0;
var total = $(':selected').data('value');
$("#total").text("£" + total);
$('#totalHidden').val(total);
}
$("#150x150").change(function () {
calculateTotal();
});
$("#200x200").change(function () {
calculateTotal();
});
<select name="Size" id="150x150">
<option data-value="24.95">24.95</option>
<option data-value="25.95">25.95</option>
<option data-value="26.95">26.95</option>
<option data-value="27.95">27.95</option>
</select>
<select name="Size" id="200x200">
<option data-value="24.95">24.95</option>
<option data-value="25.95">25.95</option>
<option data-value="26.95">26.95</option>
<option data-value="27.95">27.95</option>
</select>
So at this stage the idea is to make a selection fromt he drop down in each of the dop downs and the math is done according to their value.
I have to keep in mind also though that the total value when you first go into the screen is already calculates, as in all the top values have already been added up, and its the sales person job to then use the drop down to change the values, mostly reducing them in accordance with the customers needs.
But the over all idea is that the value from one drop down adds to the next and so on.
I thought I was close with the way below, but cant get the value to show in the div
<script type="text/javascript">
$(function(){
$('#form1').change(function(e){
e.preventDefault();
var val1 = $("#150x150").data('value');
var val2 = $("#200x200").data('value');
var total = parseInt(val1) + parseInt(val2);
$("#total").text("£" + total);
$('#totalHidden').val(total);
});
});
</script>
<form name="form1" method="post">
<select name="Size" id="150x150">
<option data-value="24.95">24.95</option>
<option data-value="25.95">25.95</option>
<option data-value="26.95">26.95</option>
<option data-value="27.95">27.95</option>
</select>
<select name="Size" id="200x200">
<option data-value="24.95">24.95</option>
<option data-value="25.95">25.95</option>
<option data-value="26.95">26.95</option>
<option data-value="27.95">27.95</option>
</select>
</form>
<div id="total"></div>
OK school boy error on the problem above, didnt put id on the form was calling it by name of form instead of id, so recified that, and unfortunatly getting a NaN as a value in the div.
So at least we passed one problem…
<script type="text/javascript">
$(function(){
$('#form1').change(function(e){
e.preventDefault();
var val1 = $("#150x150").data('value');
var val2 = $("#200x200").data('value');
alert(val1);
alert(val2);
var total = parseInt(val1) + parseInt(val2);
$("#total").text("£" + total);
$('#totalHidden').val(total);
});
});
</script>
<form name="form1" method="post" id="form1">
<select name="Size" id="150x150">
<option data-value="24.95">24.95</option>
<option data-value="25.95">25.95</option>
<option data-value="26.95">26.95</option>
<option data-value="27.95">27.95</option>
</select>
<select name="Size" id="200x200">
<option data-value="24.95">24.95</option>
<option data-value="25.95">25.95</option>
<option data-value="26.95">26.95</option>
<option data-value="27.95">27.95</option>
</select>
</form>
<div id="total"></div>
Using alert to see what var1 and var2 are worth it comes back as undefined…
i seemed to have solved that problem by using value of the drop rather than using data-value as below;
$(function (){
$('#form1').change(function(e){
e.preventDefault();
var val1 = $('#150x150').val();
var val2 = $('#200x200').val();
var total = parseInt(val1) + parseInt(val2);
$('#total').text('£' + total);
$('#totalHidden').val(total);
});
});
<select name="Size" id="150x150">
<option value="24.95">24.95</option>
<option value="25.95">25.95</option>
<option value="26.95">26.95</option>
<option value="27.95">27.95</option>
</select>
When all these dropdowns are set up, what i need to happen is that all the values are added up initially with all the top values, then its for the sales person to change the drop downs and thus the total will go down rather than up.
I have set it with the code below to calculate on page load, but for some reason its not adding up the digits after the decimal point.
<select name="Size" id="100x100">
<option value="24.95">24.95</option>
<option value="25.95">25.95</option>
<option value="26.95">26.95</option>
<option value="27.95">27.95</option>
</select>
$(document).ready(function() {
var val1 = parseInt($('#100x100').val(),10);
var val2 = parseInt($('#200x200').val(),10);
var val3 = parseInt($('#300x300').val(),10);
var val4 = parseInt($('#400x400').val(),10);
var val5 = parseInt($('#500x500').val(),10);
var val6 = parseInt($('#600x600').val(),10);
var total = val1 + val2 + val3 + val4 + val5 + val6;
$('#total').text('£' + total);
});
So basically on this first one its using the 24 rather than the 24.95
Got it, use parseFloat instead of parseInt
The code below carries out the addition of each select element every time there is a change. I have used a different approach to the one you were working on to allow this script to work in all browsers back to IE6.
Instead of using data-values I am making use of the text of the <option> element, which is more backwards compatible and avoids duplication of the numbers in the code. 
The method of gathering the <select> elements will work with any number of them, so you can add as many as you need.
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=windows-1252">
<title>drop down addition</title>
<style type="text/css">
body { font-family:arial, helvetica, sans-serif; font-weight:normal; font-size:13px; color:#000; text-align:left; margin:3px 0px; }
select { margin-right:10px; text-align:center; width:70px; }
#wrap { width:500px; height:500px; margin:20px; }
</style>
</head>
<body>
<div id="wrap">
<form name="form1" method="post" id="form1">
<select name="Size" id="150x150">
<option>0</option>
<option>24.95</option>
<option>25.95</option>
<option>26.95</option>
</select> <select name="Size" id="200x200">
<option>0</option>
<option>24.95</option>
<option>25.95</option>
<option>26.95</option>
</select> <input type="text" name="outPut" value="0" size="20">
<p><input type="reset" value="Reset" name="B2"></p>
</form>
</div>
<script type="text/javascript">
var formObj, allSelects; // global
function init()
{ formObj=document.getElementById("form1");
allSelects=formObj.getElementsByTagName("select");
for(var i=0;i<allSelects.length;i++)
{ allSelects[i].onchange=function(){
var grandTot=0, i=0;
for( i=0;i<allSelects.length;i++)
{ grandTot+=parseFloat(allSelects[i].options[allSelects[i].selectedIndex].text); }
//
formObj.outPut.value=grandTot; } }
}
//
window.onload=init;
</script>
</body>
</html>