使用HTML中的表单计算总价格 [英] Using Forms in HTML to calculate total price
本文介绍了使用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>
试试这里 http://jsfiddle.net/Wm6zC/
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> </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> </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> </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> </td>
</tr>
<tr>
<td height="58">
<button type="button" onclick="caculatePrice()">Calculate</button>
</td>
<td> </td>
</tr>
<tr>
<td height="73">The new calculated price:<INPUT Type="Text" Name="PicExtPrice" Size=8> </td>
<td> </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中的表单计算总价格的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
查看全文
