Using Forms in HTML to calculate total price

Question

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?

Answer 1

• 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/