jQuery - Perform a Calculation

I have the following 3 input fields in a form:

<input id="a" name="a" type="text" />
<input id="b" name="b" type="text" />开发者_如何学JAVA
<input id="c" name="c" type="text" />

and the following paragraph:

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

I want to multiply the three text inputs together and fill in the grand_total with the result.

I only want the result to appear when we have filled in all three text inputs with integers between 0 and 1000.

Also if any of the text field values are changed to another valid integer then I want the grand_total to be re-calculated. Any help would be much appreciated, thanks.

@brendan put me in the right direction, thanks. The code below works:

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

});

Try this:

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

What this does is check whether all the inputs have values in them. If they all contain something, the inner statement parses all the values as ints and plugs the output into grand_total

If you want to parse as floats instead of ints, simply replace parseInt() with parseFloat()

Cheers,

James

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

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

Just make sure you use 10 as argument in parseInt() to avoid unpleasant surprises ;)

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

This code will make sure each value is a number, if it is not it will default to 0 for that value:

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