jQueryの - 計算を実行し

Question

私は、フォームに次の3つの入力フィールドがあります

<input id="a" name="a" type="text" /> 
<input id="b" name="b" type="text" /> 
<input id="c" name="c" type="text" /> 

と次の段落：

<p id="grand_total"></p> 

を、私は一緒に3つのテキスト入力を乗算し、記入したいです結果はgrand_totalです。

私は、テキストフィールドの値が別の有効な整数に変更されているのいずれかが、私はgrand_totalをしたい場合、我々はまた、0〜1000

の間の整数を持つすべての3つのテキスト入力に充填したときの結果を表示します再計算される。どんな助けでも大変感謝します。

Answer 1

は正しい方向に私を入れて@brendan 、ありがとう。以下のコードは動作します：

$(document).ready(function() { 

    $('#a, #b, #c').change(function() { 
    var a = parseInt($("#a").val(), 10); 
    var b = parseInt($("#b").val(), 10); 
    var c = parseInt($("#c").val(), 10); 
    a = isNaN(a) ? 0 : a; 
    b = isNaN(b) ? 0 : b; 
    c = isNaN(b) ? 0 : c; 
    (a > 0 && a < 1000 && b > 0 && b < 1000 && c > 0 && c < 1000) ? $('#grand_total').html(a * b * c) : $('#grand_total').html(0); 
    }); 

}); 

Answer 2

はこれを試してみてください：

 
if($("#a").val().length && $("#b").val().length && $("#c").val().length) 
{ 
    $("#grand_total").html((parseInt($("#a").val()) + parseInt($("#b").val()) + parseInt($("#c").val()))); 
} 

これがないと、すべての入力がそれらの値を持っているかどうかをチェックされます。彼らはすべての何かが含まれている場合、内側の文はgrand_total

にint sとすべての値を解析し、出力プラグあなたの代わりにint秒のfloat sと解析したい場合は、単にparseFloat()

乾杯でparseInt()を置き換え、

ジェームズ

Answer 3

は、このコードは、そうでない場合、それはその値を0にデフォルト設定されます、それぞれの値が数値であることを確認します。

$("#a").change(Calc()); 
$("#b").change(Calc()); 
$("#c").change(Calc());  

function Calc() { 
var vals = []; 
vals.push($("#a").val()); 
vals.push($("#b").val()); 
vals.push($("#c").val()); 

var a = isNaN(parseInt(vals[0])) ? 0 : parseInt(vals[0]); 
var b = isNaN(parseInt(vals[1])) ? 0 : parseInt(vals[1]); 
var c = isNaN(vals[2]) ? 0 : parseInt(vals[3]); 

if(a>-1 && a<1001 && b>-1 && b<1001 && c>-1 && c<1001) 
    $("#grand_total").html(a * b * c); 
} 

Answer 4

function calcSum(inputs) { 
    var sum = 0; 
    var error = false; 

    inputs.each(function() { 
    var value = +$(this).val() || 0; 
    if (value < 0 || value > 1000) { 
     error = true; 
     return false; //Stops "each" loop 
    } 
    sum += value; 
    }); 

    if (error) { 
    ("#grand_total").text("Invalid number(s)"); 
    } else { 
    $("#grand_total").text(sum); 
    } 
} 

$("#a,#b,#c").change(function() { calcSum($("#a,#b,#c")); }); 

Answer 5

最適化されたバージョン：

var a = parseInt($('#a').val(), 10) || 0, 
    b = parseInt($('#b').val(), 10) || 0, 
    c = parseInt($('#c').val(), 10) || 0; 
    $('#grand_total').html(a+b+c); 

ちょうどあなたが不愉快な驚きを避けるためにparseInt()に引数として10を使用してください。）

Answer 6

var $inputs = $("#a, #b, #c"); 
var $result = $("#grand_total"); 

$inputs.change(function() {  
    var sum = 0; 
    var valid = true; 

    $inputs.each(function() { 
     var n = parseInt($(this).val(), 10); 

     if (isNaN(n) || n < 0 || n > 1000) { 
      return valid = false; 
     } else { 
      sum *= n; 
     } 
    }); 

    valid ? $result.text(sum).show() : $result.hide(); 
});