CODEWITHSUNDEEP
jquery
ytse_jam
ytse_jam

Reputation: 185

jquery hide/show submit button based on input field total

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

});

Upvotes: 2

Views: 2158

Answers (5)

sdespont
sdespont

Reputation: 14025

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

Upvotes: 4

zb&#39;
zb&#39;

Reputation: 8059

other way is to summarize all using $.each();

$(':input').bind('keypress keydown keyup change', function () {
    var total = parseFloat($(':input[name="total"]').val(), 10);
    var payment=0;
    $(':input[name="cash"],:input[name="credit_card"],:input[name="gift_cert"]').each(
        function() {
            payment+=parseFloat($(this).val(),10);            
        }
    )
    console.log(payment,total);
    if (payment >= total) {
        $(".test").hide();
    } else if (payment < total) {
        $(".test").show();
    }

});

Upvotes: 0

phnkha
phnkha

Reputation: 7882

It's because you remove ".test" class. Next time you cannot query $(".test") again. Try to use show/hide instead

Upvotes: 1

adeneo
adeneo

Reputation: 318312

$('input').on('keyup change', function(){
        var total = parseFloat($('input[name="total"]').val()),
            cash = parseFloat($('input[name="cash"]').val()),
            credit_card = parseFloat($('input[name="credit_card"]').val()),
            gift_cert = parseFloat($('input[name="gift_cert"]').val()),
            payment = (cash+credit_card+gift_cert);

        $(".test").toggle(payment >= total);
});

FIDDLE

Radix is not needed in parseFloat, on() is preferred over bind(), :input should be just input these days, and only the name should suffice for you selectors really, and binding to all the keypress events at the same time is just overhead.

Upvotes: 1

Yury Tarabanko
Yury Tarabanko

Reputation: 45106

Or change selector: http://jsfiddle.net/GFkSv/21/

$(':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){
        $("input[name=submit]").removeClass("test");    
        }else if(payment<total){
        $("input[name=submit]").addClass("test");
        }       

});

Upvotes: 0

Related Questions