jQuery - Cancel form submit (using “return false”?

Question

I'm running into a bit of trouble while trying to cancel the submit of a form. I've been following this tutorial (even though i'm not making a login script), and it seems to be working for him.

Here's my form:

    <form action="index.php" method="post" name="pForm">
        <textarea name="comment" onclick="if(this.value == 'skriv här...') this.value='';" onblur="if(this.value.length == 0) this.value='skriv här...';">skriv här...</textarea>
        <input class="submit" type="submit" value="Publicera!" name="submit" />
    </form>

And here's the jquery:

$(document).ready(function() {
    $('form[name=pForm]').submit(function(){

        return false;

    });
});

I've already imported jQuery in the header and i know it's working. My first thought was that it might be outdated, but it's actually "just" a year ago.

So do anyone see what's wrong?

Thanks in advance.

EDIT: From what i've read the easiest and most appropriate way to abort the submit is to return false? But i can't seem to get it working. I've searched the forum and i've found several helpful threads but none of them actually works. I must be screwing something up.

Answer 1

You have to do a sort of 'double return', or in other words, you have to return what is returned. So, you have your html:

<form action="index.php" onsubmit="return cancelSubmit()" method="post" name="pForm">
    <textarea name="comment" onclick="if(this.value == 'skriv här...') this.value='';" onblur="if(this.value.length == 0) this.value='skriv här...';">skriv här...</textarea>
    <input class="submit" type="submit" value="Publicera!" name="submit" />
</form>

Than you just have a jquery function that is called onsubmit as you see above:

function cancelSubmit() {
    return false; // return true if you want submission to carry through
}

You can put any sort of conditionals in the function above. It seems you simply want to cancel it though. Hope this helps for others that come across this answer.

Answer 2

How about this one?

$('form[name=pForm]').on('submit',function()
{
    console.log("(^o^)");
    return false;
});

Answer 3

Try using event.preventDefault

$(document).ready(function(event) {
    $('form[name=pForm]').submit(function(event){
        event.preventDefault();
        //add stuff here
    });
});

Answer 4

I also had this problem, my code (that didn't work) was something like this:

$('#upload_form').submit(function(){ before_submit('argument') });

and inside the "before_submit" function i had "return false" to stop the form from submitting:

function before_submit() {

.........................................................
return false;
}

I put "return" when binding the event handler function to the form and it worked:

$('#upload_form').submit(function(){ return before_submit('argument') });

The function attached to the submit event has to return false (in my case the anonymous function). So...this is one solution to one cause of this problem

Answer 5

I had this same problem and it was down to using Rails and :remote => true on the form. Rails jQuery driver was coming in and submitting the form by ajax while my own function was trying to stall the submission process using return false and event.preventDefault().

So look out for frameworks and default actions that interfere with your own javascript. return false should work :)

Answer 6

Thanks for the respond everybody! A friend of mine tipsed me to add

onsubmit="return(false)

on the form. That works, but i'd still like to know a not-inline-javascript trick that works.