Question

I have a form that contains about 4 input fields namely: cash, credit_card, gift_cert and total. I would like to hide the submit button if the sum of the three fields (cash, credit_card, gift_cert) is not equal to the input field(total). I think I’m almost there, but my problem lies when I try to decrease the sum, the addClass does not work.

Here is the jsfiddle.

HTML

<form>
    <input type="text" name="cash" value="0.00">
    <br />
    <input type="text" name="credit_card" value="0.00">
    <br />
    <input type="text" name="gift_cert" value="0.00">
    <br />
    <input type="text" name="total" value="100">
    <br />
    <input type="submit" name="submit" class="test" value="Save">
</form>

JS:

$(':input').bind('keypress keydown keyup change', function () {

    var total = parseFloat($(':input[name="total"]').val(), 10),
        cash = parseFloat($(':input[name="cash"]').val(), 10),
        credit_card = parseFloat($(':input[name="credit_card"]').val(), 10),
        gift_cert = parseFloat($(':input[name="gift_cert"]').val(), 10),
        payment = (cash + credit_card + gift_cert);

    if (payment >= total) {
        $(".test").removeClass("test");
    } else if (payment < total) {
        $(".test").addClass("test");
    }

});

Answer 1

Use show and hide : http://jsfiddle.net/GFkSv/18/

$(':input').bind('keypress keydown keyup change',function(){

        var total = parseFloat($(':input[name="total"]').val(),10),
            cash = parseFloat($(':input[name="cash"]').val(),10),
            credit_card = parseFloat($(':input[name="credit_card"]').val(),10),
            gift_cert = parseFloat($(':input[name="gift_cert"]').val(),10),
            payment = (cash+credit_card+gift_cert);

        if(payment >= total){
            $('.test').show();
        }else if(payment<total){
            $('.test').hide();
        }       

}); 

EDIT

Take into account pre-filled fields after page loading, just fire the keypress event afetr DOM is ready : http://jsfiddle.net/GFkSv/30/

$(document).ready(function(){
    $(':input').trigger('keypress');
});