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>

标签： javascript forms function

1条回答

叛逆

2楼-- · 2020-04-24 16:55

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/

0人赞添加讨论(0) 举报

Using Forms in HTML to calculate total price

采纳回答

编辑标签

举报内容

检举类型

检举原因

检举说明(必填)

打开微信“扫一扫”，打开网页后点击屏幕右上角分享按钮

付费偷看金额在0.1-10元之间