jquerycsstextfieldhideshow

jQuery if currency input field is greater than


I wrote some code that will hide a field until the value is over a specific amount.

My css looks like:

#main .gfield--type-total {
    display: none;
}

My JS looks like:

    if (fieldvalue > 0.30 || $0.30) {
        $(".gfield--type-total").show();
    }
    else {
        $(".gfield--type-total").hide();
    }

My total field by default shows $0.30 because it has a formula that's calculating the transaction fee and adding it to the amount. I don't want people to think I'm charging them out of the gate, so I figured I'd just hide the total field until the amount is over $0.30.

I think the code above is good, but doesn't work (I'm thinking because of the dollar sign)

What I'm trying to do is say if amount is 0.30 or $0.30 hide total, if it's above 0.30 or $0.30 show total.

Can anyone help point me in the right direction?

Thanks,
Josh


Solution

  • Thanks to @Swati for the tweak! I added @Swati's code to strip the dollar sign, then added an onchange so this will execute as the input changes :-)

    My CSS did not change, here is the Updated JS:

    $('.ginput_amount').on('input',function(e){
        var fieldvalue = $(".ginput_amount").val().replace("$","");
                
        if (fieldvalue > 0.30) {
            $(".gfield--type-total").show();
        }
        else {
            $(".gfield--type-total").hide();
        }
    });
    

    Works like a champ :-)

    Thanks,
    Josh