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

    
       Select One Choice from List-Memory Upgrade
       8 GB add $49
       12 GB add $98
       16 GB add $159
    

    
       Select One Choice from List-HDD Upgrade
       1 TB HD add $109
       1.5 TB HD add $150
       2 TB HD add $199
       250 GB SSD add $299
    

    
       Select One Choice from List- Network Upgrade
       56K V90 or X2 Modem add $109
       10/100 NIC add $79
       Combo Modem and NIC add $279
    


Calculate
The new calculated price:

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