check condition before submitting form in jquery

Question

I am submitting a frm that is basically an invoice of purchase. before submitting the form i want to implement the check that the user doesn't enter amount more than the total bill in the text box.for example if total bill is 300 and in the "paid amount" text box user enters 3000 accidentally then it should show the error message here is my code:

$("#mainform").submit(function() {
var total = $("#gtotal").val();
var paid  = $("#paid").val();
alert(paid);
alert(total);
if(paid > total)
{ 

alert("Amount can't be greater than total");

return false;
}
return true;

});

when I alert paid and total amount they show correct values, but the if condition is not working some times it submits the form if the condition is not fulfilled sometimes i doesn't even condition is fulfilled

when paid is more than total, you don't want to submit right? — Nitesh
– Nitesh, Commented Apr 23, 2017 at 13:27
Try to parse the variables total and paid in a number format with parseInt or parseFloat — Torben
– Torben, Commented Apr 23, 2017 at 13:28

Nitesh · Accepted Answer · 2017-04-23 13:29:12Z

1

Try this, it may work:

var total = parseInt($("#gtotal").val());
var paid  = parseInt($("#paid").val());

answered Apr 23, 2017 at 13:29

Nitesh

1,5151 gold badge13 silver badges21 bronze badges

Sign up to request clarification or add additional context in comments.

Comments

user2182349 · Accepted Answer · 2017-04-23 13:32:33Z

1

.val() returns strings

Convert paid and total to float with parseFloat, check them with isNaN, then compare. Like so:

paid = parseFloat(paid);
total = parseFloat(total);
if (!isNaN(paid) && !isNaN(total)) {
    if (paid > total) {
       ...

If you aren't using decimals you may use parseInt

answered Apr 23, 2017 at 13:32

user2182349

9,8323 gold badges31 silver badges44 bronze badges

Comments

sudodev · Accepted Answer · 2017-04-23 13:36:01Z

1

Add a parameter on submit function and call preventDefault method to avoid form to be submitted.

.submit(function(event) {
   ...
if (paid > total) {
   ...
   event.preventDefault();
}

answered Apr 23, 2017 at 13:36

sudodev

3531 gold badge6 silver badges18 bronze badges

Comments

gaetanoM · Accepted Answer · 2017-04-23 13:42:17Z

There are some conditions missed:

empty input field
not a number

In order to convert a string to number you can prefix the string with a plus sign.

A solution could be:

$("#mainform").on('submit', function(e) {
    var total = +$("#gtotal").val();
    var paid  = +$("#paid").val();
    if (($("#gtotal").val().trim().length == 0) || isNaN(total)) {
        console.log("Please specify total");
        $("#gtotal").focus();
        e.preventDefault();
        //
        // stop function execution....
        //
        return;
    }
    if (($("#paid").val().trim().length == 0) || isNaN(paid)) {
        console.log("Please specify paid");
        $("#paid").focus();
        e.preventDefault();
         //
        // stop function execution....
        //
        return;
    }
    if(paid > total) {
        console.log("Amount can't be greater than total");
        //
        // prevent the submit action
        //
        re.preventDefault();
    }
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>


<form id="mainform" action="http://www.google.com">
    gtotal: <input id="gtotal" type="text">
    paid:<input id="paid" type="text">
    <input type="submit" value="Submit Form">
</form>

Collectives™ on Stack Overflow

check condition before submitting form in jquery

4 Answers 4

Comments

Comments

Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

4 Answers 4

Comments

Comments

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related