How do I stop a form from submitting?

Question

How to I stop a form from submitting? I have some validation on my form, and if the the input isn't correct, then the form should't submit... In my HTML i have this when clicking submit:

<a href="#" onclick="setTimeout(function(){document.getElementById('form_4').submit()}, 1000);" style="position:static" class="btn-more">Vælg</a>

And the my script looks like this:

$("#form_4 a.btn-more").click(function (e) {

    //Validate required fields
    for (i = 0; i < required.length; i++) {
        var input = $('#' + required[i]);

        if ((input.val() == "") || (input.val() == emptyerror)) {
            input.addClass("needsfilled");
            input.val(emptyerror);
            errornotice.fadeIn(750);
            e.stopPropagation();
            return false;
        } else {
            input.removeClass("needsfilled");
        }
    }
    //if any inputs on the page have the class 'needsfilled' the form will not submit
    if ($(":input").hasClass("needsfilled")) {
        return false;
    } else {
        errornotice.hide();
        return true;
    }
});

Add a handler to `setTimeout` and the clear the time out later. — Hashem Qolami, Aug 28 '13 at 10:24

score 2 · Accepted Answer · answered Aug 28 '13 at 10:24

Use :

e.preventDefault();

before closing the click function or at start

$("#form_4 a.btn-more").click(function(e){  
    e.preventDefault();  
    //rest of the content
}

You should also change the setTimeout function as the way you have done it, it would always submit the form. Change to :

HTML :

<a href="#" style="position:static" class="btn-more">Vælg</a>

Script :

$("#form_4 a.btn-more").click(function (e) {

    //Validate required fields
    for (i = 0; i < required.length; i++) {
        var input = $('#' + required[i]);

        if ((input.val() == "") || (input.val() == emptyerror)) {
            input.addClass("needsfilled");
            input.val(emptyerror);
            errornotice.fadeIn(750);
            e.stopPropagation();
            return false;
        } else {
            input.removeClass("needsfilled");
        }
    }
    //if any inputs on the page have the class 'needsfilled' the form will not submit
    if ($(":input").hasClass("needsfilled")) {
        e.preventDefault();  
        return false;
    } else {
        errornotice.hide();
        return true;
    }
});

score 0 · Answer 2 · edited Aug 28 '13 at 10:30

0

Never use javascript functions with the HTML inline. Put all of your JS on a js file.

Then, use your if like this

 if ($(":input").hasClass("needsfilled")) 
    {
        return false;
    } 
    else 
    {
        errornotice.hide();
        $("#form_4").submit()
    }

Just call form submit when everything is ok.

edited Aug 28 '13 at 10:30

Praveen

55,303
33
133
164

answered Aug 28 '13 at 10:28

Carlos Goce

1,625
4
22
33

score 0 · Answer 3 · answered Aug 28 '13 at 10:29

onclick="return false";

This will prevent from being submitted.

return false from within a jQuery event handler is effectively the same as calling both e.preventDefault and e.stopPropagation on the passed jQuery.Event object.

or

$("#form_4 a.btn-more").click(function (e) {
 return false;
}

score 0 · Answer 4 · answered Aug 28 '13 at 10:29

At the line

errornotice.hide();
return true;

remove return true; and add the line

document.getElementById('form_4').submit();

or

$(".form4").submit();

and remove the onlick function from a link tag

<a href="#"  style="position:static" class="btn-more">Vælg</a>

score -1 · Answer 5 · edited Aug 28 '13 at 10:26

-1

$(".form4").on("submit", function () {
});

if the value return false, this is not submitting

edited Aug 28 '13 at 10:26

웃웃웃웃웃

11,829
15
59
91

answered Aug 28 '13 at 10:25

neel

5,123
12
47
67

I am not the downvoter,But you should really elaborate the answer. – Suresh Atta Aug 28 '13 at 10:33

How do I stop a form from submitting?

5 Answers5