Jessica Jessica - 2 months ago 10
Javascript Question

Using Forms in HTML to calculate total price

How can I write a function that will calculate to total price of the computer components selected by the user, this is what I have so far but now I seem to be stuck. Any ideas? I am trying to create an array for the memory prices, hdd prices and network prices. Then dont know where to go from here.

<script type = "text/javascript">

function calculatePrice(myform)
{
var memPrice=myForm.memoryItem.selectedIndex;



}

</script>

</head>
<body>
<table width="80%" align="center" cellpadding="0" cellspacing="0">
<tr>
<td height="75" colspan="2"><img src="CCLogo.jpg" width="515" height="79"></td>
</tr>
<tr>
<td width="29%" height="103"><img src="computer.jpg" width="120" height="83"></td>
<td width="71%"><p class="c">The base price of this Computer is $499.<br />Because this is back-to-school special<br /> the manufacturer offers limited options.</p></td>
</tr>
<tr>
<td height="56" colspan="2" class="d">Intel i5 Pentium, 4GB RAM, 500 GB HD, DVD/CDROM Drive, 2GB 3D AGP<br /> graphics adapter, 15 inch monitor, 32-bit Wave sound card and speakers</td>
</tr>
<tr>
<td>Optional Upgrades</td>
<td>&nbsp;</td>
</tr>
<tr>
<td height="50">
<FORM Name="myform">
<SELECT NAME="memoryItem" onChange="calculatePrice(myform)">
<OPTION>Select One Choice from List-Memory Upgrade
<OPTION>8 GB add $49
<OPTION>12 GB add $98
<OPTION>16 GB add $159

</SELECT>


</td>
<td>&nbsp;</td>
</tr>
<tr>
<td height="48">

<SELECT NAME="hddItem" onChange="calculatePrice(myform)">
<OPTION>Select One Choice from List-HDD Upgrade
<OPTION>1 TB HD add $109
<OPTION>1.5 TB HD add $150
<OPTION>2 TB HD add $199
<OPTION>250 GB SSD add $299

</SELECT>

</td>
<td>&nbsp;</td>
</tr>
<tr>
<td height="48">

<SELECT NAME="networkItem" onChange="calculatePrice(myform)">
<OPTION>Select One Choice from List- Network Upgrade
<OPTION>56K V90 or X2 Modem add $109
<OPTION>10/100 NIC add $79
<OPTION>Combo Modem and NIC add $279

</SELECT>
</FORM>
</td>
<td>&nbsp;</td>
</tr>
<tr>
<td height="58">
<button type="button" onclick="caculatePrice()">Calculate</button>
</td>
<td>&nbsp;</td>
</tr>
<tr>
<td height="73">The new calculated price:<INPUT Type="Text" Name="PicExtPrice" Size=8> </td>
<td>&nbsp;</td>
</tr>
</table>
</body>

Answer
  • Add id:s to select-elements
  • Add value attribute to option tag
  • Fix javascript

Something like this:

  function calculatePrice(){

      //Get selected data  
      var elt = document.getElementById("memoryItem");
      var memory = elt.options[elt.selectedIndex].value;

      elt = document.getElementById("hddItem");
      var hdd = elt.options[elt.selectedIndex].value;

      elt = document.getElementById("networkItem");
      var network = elt.options[elt.selectedIndex].value;

      //convert data to integers
      memory = parseInt(memory);
      hdd = parseInt(hdd);
      network = parseInt(network);

      //calculate total value  
      var total = memory+hdd+network; 

      //print value to  PicExtPrice 
      document.getElementById("PicExtPrice").value=total;

 }

And html

<FORM Name="myform">
    <SELECT NAME="memoryItem" onChange="calculatePrice()" id="memoryItem">
       <OPTION value="0">Select One Choice from List-Memory Upgrade</OPTION>
       <OPTION value="49">8 GB add $49</OPTION>
       <OPTION value="98">12 GB add $98</OPTION>
       <OPTION value="159">16 GB add $159</OPTION>
    </SELECT>

    <SELECT NAME="hddItem" onChange="calculatePrice()" id="hddItem">
       <OPTION value="0">Select One Choice from List-HDD Upgrade</OPTION>
       <OPTION value="109">1 TB HD add $109</OPTION>
       <OPTION value="150">1.5 TB HD add $150</OPTION>
       <OPTION value="199">2 TB HD add $199</OPTION>
       <OPTION value="299">250 GB SSD add $299</OPTION>
    </SELECT>

    <SELECT NAME="networkItem" onChange="calculatePrice()" id="networkItem">
       <OPTION value="0">Select One Choice from List- Network Upgrade</OPTION>
       <OPTION value="109">56K V90 or X2 Modem add $109</OPTION>
       <OPTION value="79">10/100 NIC add $79</OPTION>
       <OPTION value="279">Combo Modem and NIC add $279</OPTION>
    </SELECT>
</FORM>

<button type="button" onclick="calculatePrice()">Calculate</button>
The new calculated price:<INPUT type="text" id="PicExtPrice" Size=8>

Try it here http://jsfiddle.net/Wm6zC/