Sum up Option Values from Multiple Select Menus

  • phoumano
  • Born
  • Born
  • phoumano
  • Posts: 3
  • Loc: Connecticut

Post 3+ Months Ago

Hi all. Need some help please. Newbie with Javascript question. I am looking to modify this code and have it sum multiple select menu options. Each select menu option hold multiple values. At the moment it can sum the values of one select menu. What if there are several select menus with multiple option values. How can I get the sum of all the selected option values? Your help would be greatly appreciated.
Code: [ Select ]
function CalConA(Val) {
 if (Val == '||') { return; }
 var info = Val.split('|');
 document.getElementById('conAmatCost').value = info[0];
 document.getElementById('conAlabCost').value = info[1];
 document.getElementById('conAsetUpCost').value = info[2];
 document.getElementById('conACost').value = Number(info[0])+ Number(info[1])+ Number(info[2]);
}

<form name="form">


<table width="auto" border="0" cellspacing="0" cellpadding="10px">
 <tr bgcolor="#CCCCCC">
  <td width="121" height="200px" align="center">
</td>
<td width="159">
 </td>
  
  <td width="177">
</td>

  <td width="166">
 </td>
  <td width="169">
 </td>
  
  <td width="175">
 </td>
 <td width="166">
 </td>
  <td width="165">
</td>
  <td width="340">
 </td>
 </tr>
 <tr align="left" valign="top">
  <td width="121" height="300px" valign="middle" align="right">
<table width="100%" height="180" border="0" cellspacing="0" cellpadding="0">
 <tr height="40px" align="right">
  <td height="47" valign="bottom"><p>Material Cost:
</td>
 </tr>
 <tr align="right">
  <td height="47" valign="bottom"><p>
 Labor Cost:
</p></td>
 </tr>
 <tr align="right">
  <td height="46" valign="bottom"><p>
 Setup Cost:
</p></td>
 </tr>
 <tr align="right">
  <td height="40" valign="bottom"><p>
 Cost Total:
</p></td>
 </tr>
 <tr>
  <td></td>
 </tr>
</table><br/>
<input type="reset" value="Reset" />

</td>
<td width="159">
 <p><span class="ui-listview-inset">Connector A:<br>
<select name="sum1" id="" onChange="CalConA (this.value)">
 <option value="0|0|0">Select</option>
   <option value="0|0.11|0">Blunt Cut</option>
   <option value="0|1.33|6.67">Pre to Spec</option>
   <option value="2.09|4.47|39.87">RJ45P</option>
   <option value="30.9|0|0">M12</option>
 </select>
 </p><input type="text" value="" id="conAmatCost" readonly><p><input type="text" value="" id="conAlabCost" readonly><p>
  <input type="text" value="" id="conAsetUpCost" readonly><p><input type="text" value="" id="conACost" readonly></td>
  
  <td width="177">
 <p><span class="ui-listview-inset">Backshell A:
  <br>
  <select name="sum2" id="annualvolume" onChange="CalBkShA(this.value)">
   <option value="0|0|0">Select</option>
   <option value="28.61|5.55|36.40">26482_SeriesI_ST_B</option>
   <option value="28.61|5.55|36.40">26482_SeriesI_RA_B</option>
   <option value="30.36|5.55|36.40">26482_SeriesI_ST_G</option>
   <option value="30.36|5.55|36.40">26482_SeriesI_RA_G</option>
   <option value="29.64|5.55|36.40">26482_SeriesI_ST_N</option>
   <option value="29.64|5.55|36.40">26482_SeriesI_RA_N</option>
   <option value="47.05|5.55|36.40">38999_SeriesI_ST_G</option>
   <option value="47.05|5.55|36.40">38999_SeriesI_RA_G</option>
   <option value="46.38|5.55|36.40">38999_SeriesI_ST_N</option>
   <option value="46.38|5.55|36.40">38999_SeriesI_RA_N</option>
   <option value="0.14|0.83|3.33">BootSR</option>
   <option value="0.11|0|0">OvermoldSR</option>
  </select>
 </p><input type="text" value="" id="BkShAmatCost" readonly><p><input type="text" value="" id="BkShAlabCost" readonly><p><input type="text" value="" id="BkShAsetUpCost" readonly><p><input type="text" value="" id="BkShACost" readonly></td>

  <td width="166">
 <p>Cable:<br>
<select name="sum3" id="annualvolume" onChange="CalCab(this.value)">
 <option value="0|0|0">Select</option>
   <option value="0|0|0">None</option>
   <option value="0.62|0.02|4">Cat5 E</option>
 </select>
 </p><input type="text" value="" id="CabMatCost" readonly><p><input type="text" value="" id="CabLabCost" readonly><p><input type="text" value="" id="CabSetUpCost" readonly><p><input type="text" value="" id="CabCost" readonly></td>
  <td width="169">
 <p><span class="ui-listview-inset">Cable Length (Feet)<br>
<select name="sum4" id="CableLength" onChange="CalCabLen(this.value)">
   <option value="0|0|0">Select</option>
   <option value="0.62|0.02|4">1</option>
   <option value="1.25|0.02|4">2</option>
   <option value="1.87|0.02|4">3</option>
   <option value="2.49|0.02|4">4</option>
   <option value="3.11|0.02|4">5</option>
   <option value="3.74|0.02|4">6</option>
   <option value="4.36|0.02|4">7</option>
   <option value="4.98|0.02|4">8</option>
   <option value="5.60|0.02|4">9</option>
   <option value="6.23|0.02|4">10</option>
 </select>
 </p><input type="hidden" value="" id="CabLenMatCost" readonly><p><input type="hidden" value="" id="CabLenLabCost" readonly><p><input type="hidden" value="" id="CabLenSetUpCost" readonly><p><input type="hidden" value="" id="CabLenCost" readonly></td>
  
  <td width="175">
 <p><span class="ui-listview-inset">Backshell B:
  <br>
  <select name="sum5" id="annualvolume" onChange="CalBkShB(this.value)">
   <option value="0|0|0">Select</option>
   <option value="28.61|5.55|36.40">26482_SeriesI_ST_B</option>
   <option value="28.61|5.55|36.40">26482_SeriesI_RA_B</option>
   <option value="30.36|5.55|36.40">26482_SeriesI_ST_G</option>
   <option value="30.36|5.55|36.40">26482_SeriesI_RA_G</option>
   <option value="29.64|5.55|36.40">26482_SeriesI_ST_N</option>
   <option value="29.64|5.55|36.40">26482_SeriesI_RA_N</option>
   <option value="47.05|5.55|36.40">38999_SeriesI_ST_G</option>
   <option value="47.05|5.55|36.40">38999_SeriesI_RA_G</option>
   <option value="46.38|5.55|36.40">38999_SeriesI_ST_N</option>
   <option value="46.38|5.55|36.40">38999_SeriesI_RA_N</option>
   <option value="0.14|0.83|3.33">BootSR</option>
   <option value="0.11|0|0">OvermoldSR</option>
  </select>
 </p><input type="text" value="" id="BkShBMatCost" readonly><p><input type="text" value="" id="BkShBlabCost" readonly><p><input type="text" value="" id="BkShBSetUpCost" readonly><p><input type="text" value="" id="BkShBCost" readonly></td>
 <td width="166">
 <p><span class="ui-listview-inset">Connector B:
  <br>
  <select name="sum6" id="annualvolume" onChange="CalConB(this.value)">
      <option value="0|0|0">Select</option>
   <option value="0|0.11|0">Blunt Cut</option>
   <option value="0|1.33|6.67">Pre to Spec</option>
   <option value="2.09|4.47|39.87">RJ45P</option>
   <option value="30.9|0|0">M12</option>
 </select>
 </p><input type="text" value="" id="ConBMatCost" readonly><p><input type="text" value="" id="ConBLabCost" readonly><p><input type="text" value="" id="ConBSetUpCost" readonly><p><input type="text" value="" id="ConBCost" readonly></td>
  <td width="165">
 <p><span class="ui-listview-inset">Labor & Setup:
  <br>
  <select name="sum7" id="annualvolume" onChange="CalAA(this.value)">
   <option value="|">Select</option>
   <option value="0|4.99|17.60">Assembly </option>
  </select>
 </p><input type="text" value="" id="AAMatCost" readonly><p><input type="text" value="" id="AALabCost" readonly><p><input type="text" value="" id="AASetUpCost" readonly><p><input type="text" value="" id="AACost" readonly></td>
  <td width="340">
 <p><span class="ui-listview-inset">Total:
 </p><br/><input type="text" value="" id="matCost" readonly><p><input type="text" value="" id="labCost" readonly><p><input type="text" value="" id="setUpCost" readonly><p><input type="text" value="" id="conACost" readonly>
</td>
<tr>
<td colspan="9" height="50px" align="left"> Sum:
<input name="sum" readonly style="border:none"
value="0">
</td>
</tr>
<tr>
<td colspan="9" height="50px"> 
</td>
</tr>
 </tr>
</table>
</form>
  1. function CalConA(Val) {
  2.  if (Val == '||') { return; }
  3.  var info = Val.split('|');
  4.  document.getElementById('conAmatCost').value = info[0];
  5.  document.getElementById('conAlabCost').value = info[1];
  6.  document.getElementById('conAsetUpCost').value = info[2];
  7.  document.getElementById('conACost').value = Number(info[0])+ Number(info[1])+ Number(info[2]);
  8. }
  9. <form name="form">
  10. <table width="auto" border="0" cellspacing="0" cellpadding="10px">
  11.  <tr bgcolor="#CCCCCC">
  12.   <td width="121" height="200px" align="center">
  13. </td>
  14. <td width="159">
  15.  </td>
  16.   
  17.   <td width="177">
  18. </td>
  19.   <td width="166">
  20.  </td>
  21.   <td width="169">
  22.  </td>
  23.   
  24.   <td width="175">
  25.  </td>
  26.  <td width="166">
  27.  </td>
  28.   <td width="165">
  29. </td>
  30.   <td width="340">
  31.  </td>
  32.  </tr>
  33.  <tr align="left" valign="top">
  34.   <td width="121" height="300px" valign="middle" align="right">
  35. <table width="100%" height="180" border="0" cellspacing="0" cellpadding="0">
  36.  <tr height="40px" align="right">
  37.   <td height="47" valign="bottom"><p>Material Cost:
  38. </td>
  39.  </tr>
  40.  <tr align="right">
  41.   <td height="47" valign="bottom"><p>
  42.  Labor Cost:
  43. </p></td>
  44.  </tr>
  45.  <tr align="right">
  46.   <td height="46" valign="bottom"><p>
  47.  Setup Cost:
  48. </p></td>
  49.  </tr>
  50.  <tr align="right">
  51.   <td height="40" valign="bottom"><p>
  52.  Cost Total:
  53. </p></td>
  54.  </tr>
  55.  <tr>
  56.   <td></td>
  57.  </tr>
  58. </table><br/>
  59. <input type="reset" value="Reset" />
  60. </td>
  61. <td width="159">
  62.  <p><span class="ui-listview-inset">Connector A:<br>
  63. <select name="sum1" id="" onChange="CalConA (this.value)">
  64.  <option value="0|0|0">Select</option>
  65.    <option value="0|0.11|0">Blunt Cut</option>
  66.    <option value="0|1.33|6.67">Pre to Spec</option>
  67.    <option value="2.09|4.47|39.87">RJ45P</option>
  68.    <option value="30.9|0|0">M12</option>
  69.  </select>
  70.  </p><input type="text" value="" id="conAmatCost" readonly><p><input type="text" value="" id="conAlabCost" readonly><p>
  71.   <input type="text" value="" id="conAsetUpCost" readonly><p><input type="text" value="" id="conACost" readonly></td>
  72.   
  73.   <td width="177">
  74.  <p><span class="ui-listview-inset">Backshell A:
  75.   <br>
  76.   <select name="sum2" id="annualvolume" onChange="CalBkShA(this.value)">
  77.    <option value="0|0|0">Select</option>
  78.    <option value="28.61|5.55|36.40">26482_SeriesI_ST_B</option>
  79.    <option value="28.61|5.55|36.40">26482_SeriesI_RA_B</option>
  80.    <option value="30.36|5.55|36.40">26482_SeriesI_ST_G</option>
  81.    <option value="30.36|5.55|36.40">26482_SeriesI_RA_G</option>
  82.    <option value="29.64|5.55|36.40">26482_SeriesI_ST_N</option>
  83.    <option value="29.64|5.55|36.40">26482_SeriesI_RA_N</option>
  84.    <option value="47.05|5.55|36.40">38999_SeriesI_ST_G</option>
  85.    <option value="47.05|5.55|36.40">38999_SeriesI_RA_G</option>
  86.    <option value="46.38|5.55|36.40">38999_SeriesI_ST_N</option>
  87.    <option value="46.38|5.55|36.40">38999_SeriesI_RA_N</option>
  88.    <option value="0.14|0.83|3.33">BootSR</option>
  89.    <option value="0.11|0|0">OvermoldSR</option>
  90.   </select>
  91.  </p><input type="text" value="" id="BkShAmatCost" readonly><p><input type="text" value="" id="BkShAlabCost" readonly><p><input type="text" value="" id="BkShAsetUpCost" readonly><p><input type="text" value="" id="BkShACost" readonly></td>
  92.   <td width="166">
  93.  <p>Cable:<br>
  94. <select name="sum3" id="annualvolume" onChange="CalCab(this.value)">
  95.  <option value="0|0|0">Select</option>
  96.    <option value="0|0|0">None</option>
  97.    <option value="0.62|0.02|4">Cat5 E</option>
  98.  </select>
  99.  </p><input type="text" value="" id="CabMatCost" readonly><p><input type="text" value="" id="CabLabCost" readonly><p><input type="text" value="" id="CabSetUpCost" readonly><p><input type="text" value="" id="CabCost" readonly></td>
  100.   <td width="169">
  101.  <p><span class="ui-listview-inset">Cable Length (Feet)<br>
  102. <select name="sum4" id="CableLength" onChange="CalCabLen(this.value)">
  103.    <option value="0|0|0">Select</option>
  104.    <option value="0.62|0.02|4">1</option>
  105.    <option value="1.25|0.02|4">2</option>
  106.    <option value="1.87|0.02|4">3</option>
  107.    <option value="2.49|0.02|4">4</option>
  108.    <option value="3.11|0.02|4">5</option>
  109.    <option value="3.74|0.02|4">6</option>
  110.    <option value="4.36|0.02|4">7</option>
  111.    <option value="4.98|0.02|4">8</option>
  112.    <option value="5.60|0.02|4">9</option>
  113.    <option value="6.23|0.02|4">10</option>
  114.  </select>
  115.  </p><input type="hidden" value="" id="CabLenMatCost" readonly><p><input type="hidden" value="" id="CabLenLabCost" readonly><p><input type="hidden" value="" id="CabLenSetUpCost" readonly><p><input type="hidden" value="" id="CabLenCost" readonly></td>
  116.   
  117.   <td width="175">
  118.  <p><span class="ui-listview-inset">Backshell B:
  119.   <br>
  120.   <select name="sum5" id="annualvolume" onChange="CalBkShB(this.value)">
  121.    <option value="0|0|0">Select</option>
  122.    <option value="28.61|5.55|36.40">26482_SeriesI_ST_B</option>
  123.    <option value="28.61|5.55|36.40">26482_SeriesI_RA_B</option>
  124.    <option value="30.36|5.55|36.40">26482_SeriesI_ST_G</option>
  125.    <option value="30.36|5.55|36.40">26482_SeriesI_RA_G</option>
  126.    <option value="29.64|5.55|36.40">26482_SeriesI_ST_N</option>
  127.    <option value="29.64|5.55|36.40">26482_SeriesI_RA_N</option>
  128.    <option value="47.05|5.55|36.40">38999_SeriesI_ST_G</option>
  129.    <option value="47.05|5.55|36.40">38999_SeriesI_RA_G</option>
  130.    <option value="46.38|5.55|36.40">38999_SeriesI_ST_N</option>
  131.    <option value="46.38|5.55|36.40">38999_SeriesI_RA_N</option>
  132.    <option value="0.14|0.83|3.33">BootSR</option>
  133.    <option value="0.11|0|0">OvermoldSR</option>
  134.   </select>
  135.  </p><input type="text" value="" id="BkShBMatCost" readonly><p><input type="text" value="" id="BkShBlabCost" readonly><p><input type="text" value="" id="BkShBSetUpCost" readonly><p><input type="text" value="" id="BkShBCost" readonly></td>
  136.  <td width="166">
  137.  <p><span class="ui-listview-inset">Connector B:
  138.   <br>
  139.   <select name="sum6" id="annualvolume" onChange="CalConB(this.value)">
  140.       <option value="0|0|0">Select</option>
  141.    <option value="0|0.11|0">Blunt Cut</option>
  142.    <option value="0|1.33|6.67">Pre to Spec</option>
  143.    <option value="2.09|4.47|39.87">RJ45P</option>
  144.    <option value="30.9|0|0">M12</option>
  145.  </select>
  146.  </p><input type="text" value="" id="ConBMatCost" readonly><p><input type="text" value="" id="ConBLabCost" readonly><p><input type="text" value="" id="ConBSetUpCost" readonly><p><input type="text" value="" id="ConBCost" readonly></td>
  147.   <td width="165">
  148.  <p><span class="ui-listview-inset">Labor & Setup:
  149.   <br>
  150.   <select name="sum7" id="annualvolume" onChange="CalAA(this.value)">
  151.    <option value="|">Select</option>
  152.    <option value="0|4.99|17.60">Assembly </option>
  153.   </select>
  154.  </p><input type="text" value="" id="AAMatCost" readonly><p><input type="text" value="" id="AALabCost" readonly><p><input type="text" value="" id="AASetUpCost" readonly><p><input type="text" value="" id="AACost" readonly></td>
  155.   <td width="340">
  156.  <p><span class="ui-listview-inset">Total:
  157.  </p><br/><input type="text" value="" id="matCost" readonly><p><input type="text" value="" id="labCost" readonly><p><input type="text" value="" id="setUpCost" readonly><p><input type="text" value="" id="conACost" readonly>
  158. </td>
  159. <tr>
  160. <td colspan="9" height="50px" align="left"> Sum:
  161. <input name="sum" readonly style="border:none"
  162. value="0">
  163. </td>
  164. </tr>
  165. <tr>
  166. <td colspan="9" height="50px"> 
  167. </td>
  168. </tr>
  169.  </tr>
  170. </table>
  171. </form>
  • Anonymous
  • Bot
  • No Avatar
  • Posts: ?
  • Loc: Ozzuland
  • Status: Online

Post 3+ Months Ago

  • Zealous
  • Guru
  • Guru
  • User avatar
  • Posts: 1240
  • Loc: Sydney

Post 3+ Months Ago

i think your missing a few things, should you not have a document write to echo the results?

Post Information

  • Total Posts in this topic: 2 posts
  • Users browsing this forum: No registered users and 57 guests
  • You cannot post new topics in this forum
  • You cannot reply to topics in this forum
  • You cannot edit your posts in this forum
  • You cannot delete your posts in this forum
  • You cannot post attachments in this forum
 
 

© 1998-2014. Ozzu® is a registered trademark of Unmelted, LLC.