html从表单中添加并显示结帐总额

时间:2017-11-15 16:04:43

标签: javascript html

我已经完成了多个结帐的表单,其中网站访问者点击单选按钮选择要打印的产品...

我需要补充; 用于选择1面或双面打印的下拉列表,其中选择双面打印会增加“金额”总计5英镑 选择艺术品的下拉菜单:客户提供艺术品,1个侧面设计或2个没有默认设置的一面,1面增加10英镑订购,2面增加15英镑

然后显示总计优选更新为选择的无线电和下拉菜单,而不是重新计算按钮

如何添加下拉列表,重新计算无线电结果的运行总数和两个下拉费用并显示它?

任何人都可以提供帮助......我对编码很感兴趣但是真的很好,到目前为止,代码是

SA_SIGACTION

1 个答案:

答案 0 :(得分:0)

这是一个很好的原型,可以让你前进(你可以将它与你现有的方法合并):

<!DOCTYPE html>
<html>
<head>

<script type="text/javascript" language="javascript">
function calcTotal(form)
{
    var totalElem = null;
    var prodAmt = 0;
    var packAmt = 0;
    var printAmt = 0;
    var designAmt = 0;
    var totalAmt = 0;

    try
    {
        prodAmt=parseFloat(form["prodamount"].value,2);
        packAmt=parseFloat(form["packamount"].value,2);

        printAmt=parseFloat(form["printOpt"].value,2);
        designAmt=parseFloat(form["graphicOpt"].value,2);

        totalAmt = parseFloat(prodAmt+packAmt+printAmt+designAmt,2);

        totalElem=document.getElementById("Amount");
        totalElem.value = totalAmt.toString();
    }
    catch(e)
    {
        alert("calcTotal Error:  " + e.Message);
    }
    finally
    {

    }

}
</script> 
</head>
<body>
<form id="orderform" name = "orderform" onchange="calcTotal(this)">
<input type="radio" name="prodamount" value="99.99"> product 1 <br/>
<input type="radio" name="prodamount" value="129.00" checked> product 2<br/>
<input type="radio" name="prodamount" value="149.00"> product 3
<hr/>
<input type="radio" name="packamount" value="199.00"> pack 1<br/>
<input type="radio" name="packamount" value="229.00"> pack 2<br/>
<input type="radio" name="packamount" value="249.00" checked> pack 3<br/>


<!-- need to add in here a dropdown for selecting single or double side print (single stays same price but selecting double side adds £5 to the "amount" variable -->
<select id="printOpt" name="printOpt">
<option value="0" selected>none</option>
<option value="0">single</option>
<option value="5">double</option>
</select>
<br/>
<!-- another dropdown to select graphic design either 1 or 2 sides - 1 side adds £10 to total, 2 side add £15 to total -->
<select id="graphicOpt" name="graphicOpt">
<option value="0" selected>none</option>
<option value="10">1 side</option>
<option value="15">2 side</option>
</select>
<br/>
<!-- box here displaying the total preferable without having to click a recalculate button -->
<br/><br/><br/><br/><br/><br/><br/><br/><br/>
<input type="text" id="Amount" name="Amount" value="0"/>
<div id="totalAmt"></div>

</form>
<script type="text/javascript" language="javascript">
    // Calculate the initial total
    calcTotal(document.getElementById("orderform"));
</script>
</body>
</html>