Form always submitting even when you click cancel

Question

It goes to the correct if statement, but either way it always submits the form. I dont want it to submit if the statement is true, and if they press cancel I also don't want it to submit.

I also saw lots of similar questions, but none of their answers were the correct solution here.

My form html:

<form action="actual link here" method="POST" target="_blank" onsubmit="ordering()">

My js:

function ordering() {
    if($('#total').html() == "$0.00") {
        alert("You have not ordered anything. Please use our contact page if you wish to contact us.");
        return false;
    }
    else {
        return window.confirm("Are you sure?");
    }
}

no it's in there, sorry I would've posted the entire html form stuff but it's a lot of items and I'm confident I did that part right — Tom Prats, Feb 02 '13 at 20:33
To stop the submit you need to use `.on('click', function(e){...});` and stop submit with `e.preventDefault();` then do a manually submit when your conditions are met. [SEE HERE](http://stackoverflow.com/a/10092636/1880925) — ROY Finley, Feb 02 '13 at 20:39
@ROYFinley Can you show me this? I've tried using preventDefault, but I'm not sure how to do a manual submit — Tom Prats, Feb 02 '13 at 20:44
@ROYFinley my problem was actually solved, it was independent of that — Tom Prats, Feb 02 '13 at 21:02

score 1 · Accepted Answer · answered Feb 02 '13 at 20:47

1

In order to stop the submit event, you need to specify return ordering() like:

<form action="actual link here" method="POST" target="_blank" onsubmit="return ordering()">

answered Feb 02 '13 at 20:47

sevaor

189
2

score 0 · Answer 2 · answered Feb 02 '13 at 20:38

You could change the button to the div and attach the function to it's onclick attribute:

<div id='submitButton' onclick="ordering()"></div>

And make a minor change to your function:

function ordering() {
   if($('#total').html() == "$0.00") {
     alert("You have not ordered anything. Please use our contact page if you wish to contact us.");
    }
    else if(window.confirm("Are you sure?")) {
    $('form').submit();
    }
}

If you don't mind writing a style for a div to make it look like a button.

score 0 · Answer 3 · answered Feb 02 '13 at 20:59

As you're already using jQuery, you won't have to add an inline 'onsubmit=....' javascript on your page, just use this:

Give the form an ID (or a class) to make it easier to select it using jQuery;

<form id='myform' action="actual link here" method="POST" target="_blank">

<script>
$(document).ready(function () {

    $('#myform').on('submit', function(e) {
        if($('#total').html() == "$0.00") {
                e.preventDefault();
            alert("You have not ordered anything. Please use our contact page if you wish to contact us.");
            return false;
        } else {
            return window.confirm("Are you sure?");
        }
    }
});
</script>

Form always submitting even when you click cancel

3 Answers3