任何人都需要自动计算方面的小帮助?

时间:2016-02-03 20:23:04

标签: javascript jquery html forms jquery-calculation

这里有谁擅长js?

我正在寻找一个包含以下字段的表单,这些字段会自动计算并显示当我在字段旁边输入数字时的总计。

<input type="text" name="acutalprice" value="">Actual Price: 329
<input type="text" name="discount" value="">Discount: 65%
<input type="text" name="shipping" value="">Shipping: 50+

总金额:165.15

总和上的

应该得到总量输出

此致

1 个答案:

答案 0 :(得分:0)

首先,首先将jQuery库添加到页面的<head></head>部分。您应该使用jQuery download pageGoogle's Hosted Libraries page来查找jQuery库。

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.2.0/jquery.min.js"></script>

然后,您应该将<input>个元素放入<form></form>元素中,并为表单添加提交按钮。

<form id="myForm">
    <input id="actualprice" type="number" placeholder="Actual Price">
    <input id="discount" type="number" placeholder="Discount">
    <input id="shipping" type="number" placeholder="Shipping">
    <input type="submit" value="Submit">
</form>
<h3 id="result"></h3>

最后,将脚本添加到页面以提交表单。

<script>
    $('#myForm').submit(function (event) {

    event.preventDefault();

    var actualprice = Number($("#actualprice").val().trim());
    var discount = Number($("#discount").val().trim());
    var shipping = Number($("#shipping").val().trim());

    var discountRate = (100 - discount) / 100;
    var result = (actualprice * discountRate) + shipping;

    $("#result").html("Result :" + result.toFixed(2));
});
</script>
祝你好运。