jQuery - Führen Sie eine Berechnung

Question

Ich habe die folgenden drei Eingabefelder in einer Form:

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

und dem folgenden Absatz:

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

Ich möchte die drei Texteingaben zusammen multiplizieren und füllen die grand_total mit dem Ergebnis.

Ich möchte nur das Ergebnis angezeigt werden, wenn wir in allen drei Texteingaben mit ganzen Zahlen zwischen 0 und 1000

auch gefüllt haben, wenn eine der Textfeldwerte auf eine andere gültige ganze Zahl geändert werden, dann möchte ich die grand_total neu berechnet werden. Jede Hilfe würde sehr geschätzt werden, danke.

Answer 1

mich @brendan in die richtige Richtung zu setzen , Vielen Dank. Der folgende Code funktioniert:

$(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

Try this:

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

Was das bedeutet ist, prüfen Sie, ob alle Eingänge Werte in ihnen. Wenn sie alle etwas enthalten, analysiert die innere Aussage alle Werte als int s und Stecker die Ausgabe in grand_total

Wenn Sie als float s statt int s analysieren wollen, einfach ersetzen parseInt() mit parseFloat()

Cheers,

James

Answer 3

Dieser Code wird jeder Wert stellen sie sicher, eine Zahl ist, wenn es nicht für diesen Wert auf 0 wird standardmäßig ist:

$("#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

optimierte Version:

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); 

Nur du in parseInt() verwenden 10 als Argument stellen Sie sicher, um unangenehme Überraschungen zu vermeiden;)

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(); 
});