elt

elt

关注
发信
关注(28)粉丝(399)

使用HTML中的表单计算总价格

本文介绍了使用HTML中的表单计算总价格的处理方法，对大家解决问题具有一定的参考价值，需要的朋友们下面随着小编来一起学习吧！

问题描述

我如何编写一个函数来计算用户选择的计算机组件的总价格，这是我迄今为止的，但现在我似乎被卡住了。有任何想法吗？我正在尝试为内存价格，硬盘价格和网络价格创建一个阵列。然后不知道该从哪里出发。 

 < script type =text / javascript> 
 
函数calculatePrice（myform）
 {
 var memPrice = myForm.memoryItem.selectedIndex; 
 
 
 
} 
 
< / script> 
 
< / head> 
< body> 
< table width =80％align =centercellpadding =0cellspacing =0> 
< tr> 
< td height =75colspan =2>< img src =CCLogo.jpgwidth =515height =79>< / td> 
< / tr> 
< tr> 
< td width =29％height =103>< img src =computer.jpgwidth =120height =83>< / td> 
< td width =71％>< p class =c>这台电脑的基本价格为499美元。< br />因为这是返校专用< br />制造商提供的选项有限。< / p>< / td> 
< / tr> 
< tr> 
< td height =56colspan =2class =d> Intel i5 Pentium，4GB RAM，500GB HD，DVD / CDROM Drive，2GB 3D AGP< br />图形适配器，15英寸显示器，32位Wave声卡和扬声器< / td> 
< / tr> 
< tr> 
< td>可选升级< / td> 
< td>& nbsp;< / td> 
< / tr> 
< tr> 
< td height =50> 
< FORM Name =myform> 
< SELECT NAME =memoryItemonChange =calculatePrice（myform）> 
将OPTION肽从列表内存选择一项升级
将OPTION> 8 GB添加$ $ 49 B $ b将OPTION> 12 GB添加$ 98 
将OPTION> 16 GB添加$ 159 
 
< / SELECT> 
 
 
< / td> 
< td>& nbsp;< / td> 
< / tr> 
< tr> 
< td height =48> 
 
< SELECT NAME =hddItemonChange =calculatePrice（myform）> 
< OPTION>从列表中选择一个选项 -  HDD升级
< OPTION> 1 TB HD add $ 109 
< OPTION> 1.5 TB HD add $ 150 
< OPTION> 2 TB HD添加$ 199 
< OPTION> 250 GB SSD添加$ 299 
 
< / SELECT> 
 
< / td> 
< td>& nbsp;< / td> 
< / tr> 
< tr> 
< td height =48> 
 
< SELECT NAME =networkItemonChange =calculatePrice（myform）> 
将OPTION肽从列表 - 网络选择一种选择升级
将OPTION> 56K V90或X2调制解调器添加$ $ 109 B $ b将OPTION> 10/100 NIC添加$ $ 79 B $ b将; OPTION> Combo Modem和NIC add $ 279 
 
< / SELECT> 
< / FORM> 
< / td> 
< td>& nbsp;< / td> 
< / tr> 
< tr> 
< td height =58> 
< button type =buttononclick =caculatePrice（）>计算< /按钮> 
< / td> 
< td>& nbsp;< / td> 
< / tr> 
< tr> 
< td height =73>新的计算价格：< INPUT Type =TextName =PicExtPriceSize = 8> < / TD> 
< td>& nbsp;< / td> 
< / tr> 
< / table> 
< / body>


解决方案


  • 添加ID：s选择元素

  • 将值属性添加到选项标记

  • 修复javascript



类似于这样：

$ p $ function calculatePrice（）{

//获取选定的数据
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;

//将数据转换为整数
memory = parseInt（memory）;
hdd = parseInt（hdd）;
network = parseInt（网络）;

//计算总值
var total =内存+ hdd + network;

//将值打印到PicExtPrice
document.getElementById（PicExtPrice）。value = total; 






 < FORM Name =myform> 
< SELECT NAME =memoryItemonChange =calculatePrice（）id =memoryItem> 
< OPTION value =0>从列表 - 内存升级中选择一个选项< / OPTION> 
< OPTION value =49> 8 GB add $ 49< / OPTION> 
<选项值=98> 12 GB添加$ 98< / OPTION> 
< OPTION value =159> 16 GB add $ 159< / OPTION> 
< / SELECT> 
 
< SELECT NAME =hddItemonChange =calculatePrice（）id =hddItem> 
< OPTION value =0>从列表中选择一个选项 -  HDD升级< / OPTION> 
< OPTION value =109> 1 TB HD add $ 109< / OPTION> 
< OPTION值=150> 1.5 TB高清添加$ 150< / OPTION> 
< OPTION值=199> 2 TB HD add $ 199< / OPTION> 
< OPTION value =299> 250 GB SSD add $ 299< / OPTION> 
< / SELECT> 
 
< SELECT NAME =networkItemonChange =calculatePrice（）id =networkItem> 
< OPTION value =0>从列表中选择一个选项 - 网络升级< / OPTION> 
  
< OPTION value =79> 10/100 NIC add $ 79< / OPTION> 
< OPTION value =279> Combo Modem和NIC add $ 279< / OPTION> 
< / SELECT> 
< / FORM> 
 
< button type =buttononclick =calculatePrice（）>计算< /按钮> 
新的计算价格：< INPUT type =textid =PicExtPriceSize = 8>

试试这里


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>
解决方案

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

这篇关于使用HTML中的表单计算总价格的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持！

10-18 22:43
Powered by LMLPHP ©2025 elt 0.007920