如何使用javascript / jQuery获取表单字段值以求和另一个字段值？

Question

I have the following html form fields that I need the sum of acct1, acct2 and acct3 to equal the value of the surcharge field.

<input type="text" name="surcharge" id="surcharge" class="gui-input" placeholder="xx.xx">

<input type="text" name="acct1" id="acct1" placeholder="xx.xx">
<input type="text" name="acct2" id="acct2" placeholder="xx.xx">
<input type="text" name="acct3" id="acct3" placeholder="xx.xx">

I have tried several variations of this thus far:

$('#surcharge').change(function(){
    if( ( $('#acct1').val() + $('#acct2').val() + $('#acct3').val() ) == $('#surcharge') ){
        alert("Values match Surcharge");
    }
    else {
        alert("Values DO NOT match Surcharge");
    }
});

Answer 1

尝试将值转换为整数

parseInt($('#acct1').val())+parseInt($('#acct2').val());

Answer 2

The problem is that the val() method returns a string. It needs to be converted to an integer first. You can do that by calling Number() and wrapping the value inside the parentheses.

$('#surcharge').change(function(){
    if( Number($('#acct1').val()) + Number($('#acct2').val()) + Number($('#acct3').val()) == $('#surcharge').val() ){
        alert("Values match Surcharge");
    }
    else {
        alert("Values DO NOT match Surcharge");
    }
});

This is kind of tough to read though, so might be a better idea to break it down

$('#surcharge').change(function() {
    var total = 0;
    $("#acct1", "#acct2", "#acct3").each(function() {
        total += Number($(this).val());
    });
    if (total == $('surcharge').val()) {
});

Answer 3

You need to convert you field values to numbers. The default input field value is a string. At the moment you are adding strings. To get a number do this for all your fields (including surcharge):

parseFloat($('#acct1').val());

Answer 4

 $('#surcharge,#acct1,#acct2,#acct3').keyup(function() { console.log([parseInt($('#acct1').val()),parseInt($('#acct2').val()),parseInt($('#acct3').val()), parseInt($('#surcharge').val())]); if ( ( parseInt($('#acct1').val()) + parseInt($('#acct2').val()) + parseInt($('#acct3').val()) ) == parseInt( $('#surcharge').val() ) ) { alert("Values match Surcharge"); } else { alert("Values DO NOT match Surcharge"); } }); 

 <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> <input id="acct1" value="1">+ <input id="acct2" value="1">+ <input id="acct3" value="1">= <input id="surcharge" value="3"> 

Answer 5

You should change your listener to something like blur so the event doesn't trigger with every change (key press) on the surcharge field.

Also, add a class to all of your acct input fields so you can loop by the class:

$( "#surcharge" ).blur(function() {
  var total = 0;
  $(".acct").each(function() {
    if($(this).val()) {
      total += parseFloat($(this).val());
    }
  });
   //you may want total.toFixed(2)
   if(parseFloat($(this).val()) == total.toFixed(2)) {
    alert("Values match Surcharge");  
   } else {
    alert("boooo!");
   }

});

And here's a JSFiddle demo.