jquery - 2 つの入力フィールドを計算し、結果を 3 番目の入力フィールドに入れる方法

Question

最初のテキスト フィールドに値を追加し、それを 2 番目の非表示フィールドで乗算し、結果を 3 番目のテキスト フィールドに表示できるフォームが必要です。最初のフィールドに値を追加するとすぐに、キーアップなどで 3 番目のフィールドに結果が表示されるようにします。

<label>Qty:</label>
<input name="qty" id="qty" type="text" />
<input name="price" id="price" type="hidden" value="30" /><br />

<label>Total:</label>
<input name="total" id="total" type="text" />

jqueryが初めてなので、どんな助けも素晴らしいでしょう。

Answer 1

$("#qty").keyup(function(){
   total = $("#qty").val()* $("#price").val();
   $("#total").val(total);
});

Answer 2

答えは得られましたが、入力に入力した値を型キャストする必要があります。つまり、誰かが整数以外の値を入力した場合... 3番目のテキストボックスに NaN が表示されます..この問題を処理する解決策は次のとおりです

$(document).ready(function(){
    var qty=$("#qty");
    qty.keyup(function(){
        var total=isNaN(parseInt(qty.val()* $("#price").val())) ? 0 :(qty.val()* $("#price").val())
        $("#total").val(total);
    });
});

または、jsfiddle http://jsfiddle.net/ugPxf/を確認できます

Answer 3

これはうまくいくはずです。

$('#qty').on('keyup',function(){
     $('#total').val( $('#qty').val() * $('#price').val());
});

R.