Need help with calculating total based on combobox selections

**RamananKalirajan** · Apr 14 '10, 10:45 AM

Hi Htidirect,
Its simple to get the value for the selection box. But it has the complex of how you are going to add.

sample html

Code:

<select id='mySelect' onchange='addValue(this)'>
  <option value='1'>One</option>
 <option value='2'>Two</option>
 <option value='3'>Three</option>
 <option value='4'>Four</option>
 <option value='5'>Five</option>
</select>

sample JS:

Code:

function addValue(ths)
{
   alert(ths.options[ths.selectedIndex].value);
}

This how you will be able to get the value from the select box. But onchange you have to minus the previous selection value and add the new value.

Thanks and Regards
Ramanan Kalirajan

**mckatuni** · Feb 20 '13, 10:56 AM

Code:

<script type="text/javascript" language="Javascript">
	var sum=0;
	price = document.frmOne.select1.value;
	document.frmOne.txtDisplay.value = price;
    function OnChange(value){
		
		price = document.frmOne.select1.value;
		quantity = document.frmOne.select2.value;
        sum = price * quantity;
		
		document.frmOne.txtDisplay.value = sum;
    }
</script>
<form NAME = "frmOne" action="initiateorder.php" method="post">
Price:<br><INPUT name = "select1" TYPE = "Text" style="border:#999999 solid 1px; background-color:#FFF; width:40px; height:20px;" value ="2500" size = "35"><br>
Quantity:<br><select name="select2" onchange='OnChange(this.value)' style="border:#999999 solid 1px; background-color:#FFF; width:40px; height:20px;">
        <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>
        <option value="6">6</option>
        <option value="7">7</option>
        <option value="8">8</option>
        <option value="9">9</option>
        <option>10</option>
    </select><br>
Result:<br>
<INPUT TYPE = "Text" name = "txtDisplay" size = "35" value ="" style="border:#999999 solid 1px; background-color:#FFF; width:40px; height:20px;" readonly><br><br>
</form>

there you go "mckatuni"

**jmrker** · Mar 9 '13, 05:04 PM

I read the initial request differently.
I thought OP wanted to sum MULTIPLE select boxes (comboboxes)
to arive at a total.

Here is my attempt:

Code:

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8" />
<title>  </title>
<!-- For: http://bytes.com/topic/javascript/answers/885630-need-help-calculating-total-based-combobox-selections -->

<style type="text/css">
 #debugger { height:200px; width:300px; background-color:orange; border:1px solid blue; }
</style>

</head>
<body>
<div id='debugger'>
 <select id="SBox1" onchange="showOptions('colorPick',this)"></select> <input type="text" value="" id="colorPick"><p>
 <select id="SBox2" onchange="showOptions('flavorPick',this)"></select> <input type="text" value="" id="flavorPick"><p>
 <select id="SBox3" onchange="showOptions('fruitPick',this)"></select> <input type="text" value="" id="fruitPick"><p>
 <select id="SBox4" onchange="showOptions('statePick',this)"></select> <input type="text" value="" id="statePick"><p>
</div>
<button onclick="calculate()">Summation</button> <input type="text" value="" id="summation" readonly>

<script type="text/javascript">
Array.prototype.SBox = function(IDS) {
  var str = '';  var tarr = [];
  for (var i=0; i<this.length; ++i) {
    if (this[i].indexOf('~') != -1) { tarr = this[i].split('~'); }
                               else { tarr = [0,0]; tarr[0] = this[i]; tarr[1] = i; } // this[i]; } // default: selectedIndex | value
    str += '<option value="'+tarr[1]+'">'+tarr[0]+'</option>';
  } document.getElementById(IDS).innerHTML=str;
}
function calculate() {
  var sum = 0;
  var sel = document.getElementById('debugger').getElementsByTagName('select');
  for (var i=0; i<sel.length; i++) {
    sum += Number(sel[i].value);
  }
  document.getElementById('summation').value = sum;
}
function showOptions(ids,formInfo) {
  var tmp = formInfo.value;
  if (tmp != '~') { document.getElementById(ids).value = formInfo.value; }
             else { document.getElementById(ids).value = ''; }
}
var Colors  = ['Choose color~','1 Red~1','2 Orange~2','3 Yellow~3','4 Green~4','5 Blue~5','6 Indigo~6','7 Violet~7'];
var Flavors = ['Choose flavor~','1 Vanilla~1','2 Chocolate~2','3 Strawbery~3','4 Lime~4','5 Blueberry~5'];
var Fruits  = ['Choose fruit','1 Apple~1','2 Bannana~2','3 Cantaloupe~3','4 Kiwi~4','5 Orange~5','6 Watermelon~6'];
var States  = ['State~','1 Alabama~1','2 Alaska~2','3 Arkansas~3','7 Florida~7'];

window.onload = function () {
  var str = '';
  Colors.SBox('SBox1');
  Flavors.SBox('SBox2');
  Fruits.SBox('SBox3');
  States.SBox('SBox4');
}
</script>

</body>
</html>

Need help with calculating total based on combobox selections

Need help with calculating total based on combobox selections

Comment

Comment

Comment