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

The value of name needs quotes around it. Try this:

$(document).ready(function() {
    $("form[name='pForm']").submit(function(){
        return false;
    });
});

Answer 2

You indicate that "that the alert before the 'return false' doesn't show".

When using jQuery, the id or name of the submit element can not be 'submit' - if it is, then the submit event won't be fired.

Answer 3

I've run into similar issues. I solved them by removing the action and method of the form prior to validation and then adding them back in after validation. Here is the validator I wrote:

var Validator = function (formSelector) {
    this.formSelector = formSelector;
//  $(formSelector).submit(function() {return false;});
        this.Action = $(formSelector).attr("action");
        this.Method = $(formSelector).attr("method");
    $(formSelector).attr("action",function(){return ""}).attr("method",function(){return ""});  
        var donotsubmit = false;
        var notjustcheckbox = false;
        var checknotchecked = false;
    this.Required = new Array();
    this.Email = new Array();
    this.validate = function () {
        this.form = $(this.formSelector);
        var i = 0;
        for (i in this.Required){
            $(this.Required[i]).attr("value", function(index,attr){
                // Check on checkboxes...   
                if (this.getAttribute("type") == "checkbox"){
                    if (this.checked == false){ 
                        checknotchecked = true;
                        donotsubmit = true;
                    } else {
                    }       
                } else {    
                    if (attr == "" || attr == undefined){   
                        this.style.border = "1px solid red";
                        notjustcheckbox = true;
                        donotsubmit = true;     
                    } else {
                        this.style.border = "1px solid green";
                    }
                }
            });
        }
        i = 0;
        for (i in this.Email){
            $(this.Email[i]).attr("value", function(index,email){
                var filter=/^([\w-]+(?:\.[\w-]+)*)@((?:[\w-]+\.)*\w[\w-]{0,66})\.([a-z]{2,6}(?:\.[a-z]{2})?)$/i ;
                if (filter.test(email) == true || filter.test(email) == "true") {
                    this.style.border = "1px solid green";
                } else if (filter.test(email) == false) {
                    donotsubmit = true;
                    notjustcheckbox = true;
                    this.style.border = "1px solid red";
                }
            });
        }
        if (donotsubmit == true){
            if (checknotchecked == true && notjustcheckbox == true){    
                alert("Please correct the fields in red and check the required checkboxes");
            } else if (checknotchecked == true && notjustcheckbox == false){
                alert("Please check the required checkboxes");
            } else {
                alert("Please correct the fields in red");
            }
            checknotchecked = false;
            notjustcheckbox = false;
            donotsubmit = false;
        } else {
            $(formSelector).attr({action : ''+this.Action+''});
            $(formSelector).attr({method : ''+this.Method+''});
            $(formSelector).submit();   
        }
        return true;
    };
};

You can implement it like this:

$(document).ready(function(){
    var myForm = new Validator("#formId");
        myForm.Required = new Array("input.lightborder");
                myForm.Email = new Array("#email");
                $("#form-submit-button-id").click(function(){
                    myForm.validate();
                });
});

You can add CSS Selectors for required fields. The one for Email must be unique.

Answer 4

It should work fine. There's likely more at matter. Unfortunately the code in your question is not in an SSCCE flavor so that it's hard to nail down the root cause. Probably you didn't import jQuery library at all. Or you called $(document).ready() before importing jQuery library. Or you have another JS library which is conflicting $(). Or the actual form doesn't have the desired name. Etc..etc..

To get you started, here's a fullworthy SSCCE. All you need to do is to copy'n'paste'n'run it.

<!DOCTYPE html>
<html lang="en">
    <head>
        <title>SO question 3569072</title>
        <script src="http://code.jquery.com/jquery-latest.min.js"></script>
        <script>
            $(document).ready(function() {
                $('form[name=pForm]').submit(function() {
                    alert('Submit blocked!');
                    return false;
                });
            });
        </script>
    </head>
    <body>
        <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>
    </body>
</html>

If it works (at least, it works here, I get an alert and the form isn't submitted at all), compare it with your own code and try to cutdown your own code into this flavor so that you can better spot the differences (and thus your mistake).

Regardless, in my opinion it will be worth the effort to get yourself through some basic/trivial jQuery (and preferably also JavaScript) tutorials so that you get a better understanding what's going on under the covers and learn how to use tools like Firebug.

Answer 5

Just my humble contribution to this (unanswered, dated too) question. I've run on this problem several times already always with the same solution:

Don't use

<input name="submit" />

along with

$('form').submit(function(){...});

This fires the wrong element/item bringing no errors nor warnings. So just name your submit button something else and everything magically starts working again.

Answer 6

The form you're trying to access might be dynamically added to your page. You need to use delegate to access that form in that case

Example:

    $(document).delegate("#myform","submit",function(){
       return false;
});