Question

好的，我对javascript的工作方式有很好的理解，但不知道如何实现它。我有一个简单的表格，需要动态计算x票数的价格，每张75.00。我们假设表单ID是数量＆amp;总计，75.00是一个比率。执行此操作的脚本是什么以及我应该在哪里添加它。

相关的HTML是：

<form id="docContainer" enctype="multipart/form-data" method="POST" action="" 
    novalidate="novalidate" data-form="preview">

    <label id="item4_label_0" ># of Tickets</label>
    <input type="text" id="quantity" maxlength="254" data-hint="" name="quantity" required/>

    <label id="item13_label_0">Price Per Ticket</label>
    <input name="item_price" type="text" id="item_price" placeholder="75.00"
     maxlength="254" readonly data-hint="75.00"/>

    <label id="item14_label_0" >Total</label>
    <input name="total_price" type="text" id="total_price" maxlength="254" readonly/>

    <input type="submit" class="fb-button-special" id="fb-submit-button" value="Submit" />
</form>

Answer 1

您的输入没有ID，所以我使用了他们的名字。这就是你用jQuery做的方法。我已经忘记了如何写旧学校的javascript，也许其他人可以加入这个。

<script src="jquery.js"></script>
<script>
$(function(){
    $('input[name="quantity"]').on('change keyup', function(){
        $('input[name="total_price"]').val($(this).val() * $('input[name="item_price"]').val());
    });
});
</script>

之前

</body>

编辑：为jQuery添加了必要的东西，但这可以通过常规的js来完成。

Answer 2

<html>
    <head>
        <script>            

            window.onload = function() {
                var calculSumToString = function calculSumToString() {
                    totalField.value = (qtyField.value * itemPriceField.value).toFixed(2) + " $";
                };

                var totalField = document.getElementById('total_price');
                var qtyField = document.getElementById('quantity');
                var itemPriceField = document.getElementById('item_price');

                qtyField.onkeyup = calculSumToString;

                itemPriceField.onkeyup = calculSumToString;

            };
        </script>

    </head>

    <body>
        <form id="docContainer" enctype="multipart/form-data" method="POST" action="" 
              novalidate="novalidate" data-form="preview">

            <label id="item4_label_0" ># of Tickets</label>
            <input type="text" id="quantity" maxlength="254" data-hint="" name="quantity" required/>

            <label id="item13_label_0">Price Per Ticket</label>
            <input name="item_price" type="text" id="item_price" value="75.00"
                   maxlength="254" readonly data-hint="75.00"/>

            <label id="item14_label_0" >Total</label>
            <input name="total_price" type="text" id="total_price" maxlength="254" readonly/>

            <input type="submit" class="fb-button-special" id="fb-submit-button" value="Submit" />
        </form>
    </body>
</html>

如何制作一个简单的表格来计算数量x的固定利率？

2 个答案: