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 に答える