0

好的，我对 javascript 的工作原理非常了解，但不知道如何实现它。我有一个简单的表格，需要即时计算 x 票的价格，每张 75.00。假设表单 id 是数量和总数，其中 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>
4

2 回答 2

0

您的输入没有 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 来完成。

于 2012-12-10T22:07:05.387 回答
0 
<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>
于 2012-12-10T22:26:30.497 回答