By using this site, you agree to our updated Privacy Policy and our Terms of Use. Manage your Cookies Settings.
445,920 Members | 1,905 Online
Bytes IT Community
+ Ask a Question
Need help? Post your question and get tips & solutions from a community of 445,920 IT Pros & Developers. It's quick & easy.

Need help with calculating total based on combobox selections

P: 1
I am currently creating a form that requires me to have multiple comboboxes which have various options with different values.

What I am having a problem with is finding a javascript snippet that will allow me to add the total value of all the comboboxes based on the selections.

I have an editbox at the bottom of the form where I would like the total value to appear.

I finally figured out how to calculate the form total based on the checkboxes and radio selections, but I can't find any javascript for comboboxes.

I would appreciate any type of help I can get.

Thanks!
Apr 14 '10 #1
Share this Question
Share on Google+
3 Replies


RamananKalirajan
100+
P: 607
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

Expand|Select|Wrap|Line Numbers
  1. <select id='mySelect' onchange='addValue(this)'>
  2.   <option value='1'>One</option>
  3.  <option value='2'>Two</option>
  4.  <option value='3'>Three</option>
  5.  <option value='4'>Four</option>
  6.  <option value='5'>Five</option>
  7. </select>
sample JS:
Expand|Select|Wrap|Line Numbers
  1.  
  2. function addValue(ths)
  3. {
  4.    alert(ths.options[ths.selectedIndex].value);
  5. }

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
Apr 14 '10 #2

P: 1
Expand|Select|Wrap|Line Numbers
  1. <script type="text/javascript" language="Javascript">
  2.     var sum=0;
  3.     price = document.frmOne.select1.value;
  4.     document.frmOne.txtDisplay.value = price;
  5.     function OnChange(value){
  6.  
  7.         price = document.frmOne.select1.value;
  8.         quantity = document.frmOne.select2.value;
  9.         sum = price * quantity;
  10.  
  11.         document.frmOne.txtDisplay.value = sum;
  12.     }
  13. </script>
  14. <form NAME = "frmOne" action="initiateorder.php" method="post">
  15. Price:<br><INPUT name = "select1" TYPE = "Text" style="border:#999999 solid 1px; background-color:#FFF; width:40px; height:20px;" value ="2500" size = "35"><br>
  16. Quantity:<br><select name="select2" onchange='OnChange(this.value)' style="border:#999999 solid 1px; background-color:#FFF; width:40px; height:20px;">
  17.         <option value="1">1</option>
  18.         <option value="2">2</option>
  19.         <option value="3">3</option>
  20.     <option value="4">4</option>
  21.         <option value="5">5</option>
  22.         <option value="6">6</option>
  23.         <option value="7">7</option>
  24.         <option value="8">8</option>
  25.         <option value="9">9</option>
  26.         <option>10</option>
  27.     </select><br>
  28. Result:<br>
  29. <INPUT TYPE = "Text" name = "txtDisplay" size = "35" value ="" style="border:#999999 solid 1px; background-color:#FFF; width:40px; height:20px;" readonly><br><br>
  30. </form>
there you go "mckatuni"
Feb 20 '13 #3

P: 17
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:
Expand|Select|Wrap|Line Numbers
  1. <!DOCTYPE html>
  2. <html lang="en">
  3. <head>
  4. <meta charset="utf-8" />
  5. <title>  </title>
  6. <!-- For: http://bytes.com/topic/javascript/answers/885630-need-help-calculating-total-based-combobox-selections -->
  7.  
  8. <style type="text/css">
  9.  #debugger { height:200px; width:300px; background-color:orange; border:1px solid blue; }
  10. </style>
  11.  
  12. </head>
  13. <body>
  14. <div id='debugger'>
  15.  <select id="SBox1" onchange="showOptions('colorPick',this)"></select> <input type="text" value="" id="colorPick"><p>
  16.  <select id="SBox2" onchange="showOptions('flavorPick',this)"></select> <input type="text" value="" id="flavorPick"><p>
  17.  <select id="SBox3" onchange="showOptions('fruitPick',this)"></select> <input type="text" value="" id="fruitPick"><p>
  18.  <select id="SBox4" onchange="showOptions('statePick',this)"></select> <input type="text" value="" id="statePick"><p>
  19. </div>
  20. <button onclick="calculate()">Summation</button> <input type="text" value="" id="summation" readonly>
  21.  
  22. <script type="text/javascript">
  23. Array.prototype.SBox = function(IDS) {
  24.   var str = '';  var tarr = [];
  25.   for (var i=0; i<this.length; ++i) {
  26.     if (this[i].indexOf('~') != -1) { tarr = this[i].split('~'); }
  27.                                else { tarr = [0,0]; tarr[0] = this[i]; tarr[1] = i; } // this[i]; } // default: selectedIndex | value
  28.     str += '<option value="'+tarr[1]+'">'+tarr[0]+'</option>';
  29.   } document.getElementById(IDS).innerHTML=str;
  30. }
  31. function calculate() {
  32.   var sum = 0;
  33.   var sel = document.getElementById('debugger').getElementsByTagName('select');
  34.   for (var i=0; i<sel.length; i++) {
  35.     sum += Number(sel[i].value);
  36.   }
  37.   document.getElementById('summation').value = sum;
  38. }
  39. function showOptions(ids,formInfo) {
  40.   var tmp = formInfo.value;
  41.   if (tmp != '~') { document.getElementById(ids).value = formInfo.value; }
  42.              else { document.getElementById(ids).value = ''; }
  43. }
  44. 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'];
  45. var Flavors = ['Choose flavor~','1 Vanilla~1','2 Chocolate~2','3 Strawbery~3','4 Lime~4','5 Blueberry~5'];
  46. var Fruits  = ['Choose fruit','1 Apple~1','2 Bannana~2','3 Cantaloupe~3','4 Kiwi~4','5 Orange~5','6 Watermelon~6'];
  47. var States  = ['State~','1 Alabama~1','2 Alaska~2','3 Arkansas~3','7 Florida~7'];
  48.  
  49. window.onload = function () {
  50.   var str = '';
  51.   Colors.SBox('SBox1');
  52.   Flavors.SBox('SBox2');
  53.   Fruits.SBox('SBox3');
  54.   States.SBox('SBox4');
  55. }
  56. </script>
  57.  
  58. </body>
  59. </html>
  60.  
Mar 9 '13 #4

Post your reply

Sign in to post your reply or Sign up for a free account.