Javascript Sum function

Hyperjase · January 29, 2012

Hi all,

Trying to get a function going which will add up all the numbers from several drop down boxes. Here is the code:

<?php 
foreach ($_SESSION['topping'] as $value) {
    echo "<tr><td width='30%'>Topping</td><td width='50%'>$value</td><td width='20%'><select name='notopping[$value]'>";
$counter = 1;
while ( $counter <= $_SESSION['cupcake'] ) {
  echo '<option value='.$counter.'>'.$counter.'</option>';
  $counter++;
}

When the option value is selected, it will select a number, from either 1 to 36. This is in a foreach loop as the number of drop down boxes is dynamic - chosen from a number of check boxes. How would I create a javascript function that when the drop down box is changed, the figures are added together and shown at the side. I want it to be that it shows the number selected in total.

Thanks,

Jason

lonewolf217 · January 30, 2012

if i understand correctly you just need to sum the vals from multiple dropdowns, so assign an ID to each dropdown then you can do something like this (excuse little syntax errors)

<select name='drop1' id='drop1' onChange='sumSelect()';>
</select>

<select name='drop2' id='drop2' onChange='sumSelect()';>
</select

<select name='drop3' id='drop3' onChange='sumSelect()';>
</select>

<span id="total"></span>

<script type="text/javascript">
function sumSelect() {
  var total = document.getElementById("drop1").val() + document.getElementById("drop2").val() + document.getElementById("drop3").val();
  document.getElementById("total").innerHTML(total);
}
</script>

of course you can optimize it by looping through all of your select statements depending on your naming convention, something like jquery could really speed it up if they have all the same class for example.

Hyperjase · January 30, 2012

I could assign them all with the same class, thats easy as because it's in a foreach loop, the select will always be the same where I assign a manual value. I have no experience with jquery though, any pointers?

Thanks,

Jason

lonewolf217 · January 30, 2012

with a class you no longer need the onclick, you would just have jquery something like this

$(document).ready({
$(".dropdown").change(function() {
var total = 0;
$(".dropdown").each(s,function() {
    total += s.val();
});
$("#total").innerHTML("The Total is " + total);
});
<body>
<span id="total"></span>
</body>

});

Hyperjase · January 30, 2012

Thanks for the code, do I need to wrap it within <javascript>? I've pased it directly in but not sure if it needs something around it!

Cheers,

Jason

lonewolf217 · January 30, 2012

yea sorry you need to include the jquery source files and then wrap this into the script headers. you can find the details at jquery.com

Hyperjase · January 31, 2012

I think I have jquery there for another part of code so that should be fine .... just confused by the )); on the final line, after the </body> code - is that correct? Or should I disregard that part?

Cheers!

Jason

lonewolf217 · January 31, 2012

copy/paste glitch i think

Hyperjase · February 1, 2012

I've been trying the code but Dreamweaver keeps telling me there's an error with this line of code : $(".dropdown").change(function() {

I wrapped it inside <script type="text/javascript">##</script> - thats when it spat out the error.

Any ideas? I'm quite out of my depth with jquery.

Thanks,

Jason

lonewolf217 · February 1, 2012

i code in notepad++ not dreamweaver so unsure. does dreamweaver even support jquery ?

post the whole section of code here, maybe there is another syntax error somewhere

Andy-H · February 1, 2012

No need to load jquery just for that:


<script type="text/javascript">
<!--
Array.prototype.sum = function(){
for( var i=0,sum=0; i < this.length; i++)
{
	if ( typeof this[i] == 'undefined' || parseInt(this[i]) == 'NaN' )
		continue;
	sum += this[i];
}
return sum;
}
var totals = [];
window.addEventListener('DOMContentLoaded', function() {
var selects = document.getElementsByTagName('select');
for( var k=0; k < selects.length; k++ )
{
	// only count selects of certain class?
	// if ( this.className != 'class' ) continue;
	selects[k].uid = k+1;
	selects[k].addEventListener('change', function() {
		totals[this.uid] = parseInt(this.value);
		document.getElementById('total').value = totals.sum();
	});
}
});
//-->
</script>
<select name="test">
<option value="0">0</option>
<option value="1">1</option>
<option value="2">2</option>
<option value="3">3</option>
</select>
<select name="test1">
<option value="0">0</option>
<option value="1">1</option>
<option value="2">2</option>
<option value="3">3</option>
</select>
<select name="test2">
<option value="0">0</option>
<option value="1">1</option>
<option value="2">2</option>
<option value="3">3</option>
</select>
<input type="text" id="total" >

Hyperjase · February 6, 2012

Perfect, I just need it to show without the input box - will check on formatting for that.

Is there any way of disabling the submit button until the total number is reached?

Thanks,

Jason

Hyperjase · February 6, 2012

I also have another problem which I'm not sure how to solve.

I have more than one drop down box that needs to show the total. At the moment, the second set of drop down boxes adds to the first total (which it will logically), but I've tried changing the code to reflect the name of the drop down (by using var selects = document.getElementsByTagName('select.topping') - but that doesn't work. The next small issue I can see is that each dropdown is dynamic (<select name='notopping[$value]'>). So one could be Chocolate, one could be Choc Orange. So can I associate two different drop down sets with two different counters?

Thanks,

Jason

Andy-H · February 6, 2012

post your code

Hyperjase · February 6, 2012

Here's the entire form script (please excuse any syntax stuff - I'm still learning)

<form id="nocupcakes" method="post" action="?step=3">
<table width="70%" align="center">
<tr>
<td colspan="3">
Please select how many of each type of Cupcake topping you would like<br />
</td>
</tr>
<?php
foreach ($_SESSION['topping'] as $value) {
    echo "<tr><td width='30%'>Topping</td><td width='50%'>$value</td><td width='20%'><select name='notopping[$value]'>";
$counter = 1;
while ( $counter <= $_SESSION['cupcake'] ) {
  echo '<option value='.$counter.'>'.$counter.'</option>';
  $counter++;
}
echo "</select></td></tr>";
}
echo "<tr><td colspan='3' align='center'>Choices Left: <input type='text' id='total' class='dis' size='2' value='0' />/".$_SESSION['cupcake']."</td></tr>";
if (count($_SESSION['swtopping']) > 0) {
?>
<tr>
<td colspan="3">
<br /><br />Please select how many of each type of sweetie topping you would like<br />
</td>
</tr>
<?php
foreach ($_SESSION['swtopping'] as $value) {
    echo "<tr><td width='30%'>Sweetie topping</td><td width='50%'>$value</td><td width='20%'><select name='noswtopping[$value]'>";
$counter = 1;
while ( $counter <= $_SESSION['cupcake'] ) {
  echo '<option name="noswtopping" value="'.$counter.'">'.$counter.'</option>';
  $counter++;
}
echo "</select></td></tr>";
}
echo "<tr><td colspan='3' align='center'>Choices Left: <input type='text' id='total' class='dis' size='2' value='0' />/".$_SESSION['cupcake']."</td></tr>";
}
?>
<tr><td colspan="3"><hr /></td></tr>
<tr><td colspan="3">Would you like them delivered or would you prefer to collect?</td></tr>
<tr><td colspan="2" align="right">Delivered</td><td><input name="delcol" type="radio" value="delivered" data-bvalidator="required" data-bvalidator-msg="Select delivery or collection please" /></td></tr>
<tr><td colspan="2" align="right">Collection</td><td><input name="delcol" type="radio" value="collected" /><br /></td></tr>
</div><tr><td colspan="3" align="center"><input type="submit" value="Next >>" class="submit" /></td></tr>
</td>
</table>
</form>

The Sweetie Topping drop down only appears if any have been selected, at least one Topping drop down will always show.

Thanks for your time,

Jason

Andy-H · February 6, 2012

I don't really get you, you want to associate one drop-down to one total? Or multiple to multiple?

Hyperjase · February 7, 2012

Sorry I have a habit of making simple things sound over complicated! There are two sets of drop downs which need multiple counters, so one for each. I did try doing this myself but couldn't alter the JavaScript to pick up each drop down.

Thanks,

Jason

Hyperjase · February 24, 2012

How would I use the javascript on two different sets of drop down selects?

Thanks ~ Jason

Sign In

Javascript Sum function

Recommended Posts

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Join the conversation

Important Information