Prevent form from submitting multiple times

Question

I have some code where I'm trying to prevent a form from being submitted multiple times. I found this code on another Stack thread but it doesn't work. Instead it submits the form infinite times and lags the entire server!

$(document).ready(function() {
    $('form').submit(function() {
        console.log("hi")
        if ($(this).valid()) {
            $(this).submit(function(){
                return false;
            });
            return true; //Tried with an without
        }
    });
});

Here is a picture of the output in the console:

This keep submitting the form. I just took a picture at that number.

The thread that I found the code above from is the accepted answer on this question and it has many upvotes.

Note that I have multiple forms per page, and many pages with many forms! A solution to one specific form is not sufficient. I need a global solution. Also I'm using Codeigniter.

Well it will cause a infinite loop, (1), because your checking the event form's submit, (2), and inside your submitting the form, go back to (1). Try getting rid of the `submit()` callback, and attach the code to a simple button. — Keith, Nov 18 '16 at 16:37

Scott Marcus · Answer 1 · 2016-11-18T16:53:10.993

0

You need to cancel the initial form submission so that you only do it after you've validated it. But frankly, HTML5 won't submit if a form is not valid, so your code seems redundant.

Here is a working example that takes most of the JQuery out of the mix. It only submits the form one time.

You can also test it here: https://jsfiddle.net/5oyp6aa0/6/

$(function() {
    var theForm = document.querySelector("form");
    theForm.addEventListener("submit",function(evt) {
        // First, cancel the form's submission:
        evt.preventDefault();
        evt.stopPropagation();
        console.log("Navitve Submit Cancelled")
        if (theForm.checkValidity()) {
            // Then, only if it's valid, submit
            console.log("Manual Submit Triggered");
            theForm.submit();
        }
    });

});

edited Nov 18 '16 at 16:53

answered Nov 18 '16 at 16:29

Scott Marcus

64,069
6
49
71

`evt.preventDefault is not a function.` evt is in the wrong function haha. i will test it again. – Nov 18 '16 at 16:32
1

@RoryMcCrossan Thanks. Not awake yet! – Scott Marcus Nov 18 '16 at 16:34
It still submits multiple times. Submits over a thousand times in just 5 seconds. – Nov 18 '16 at 16:34
@Nic Try the updated answer. Instead of redefining the submit event handling function again, this just submits if the form is valid. – Scott Marcus Nov 18 '16 at 16:36
It still does it unfortunately :S – Nov 18 '16 at 16:38
With the updated answer I don't receive any input in the console. I don't think the event listener is firing for me. – Nov 18 '16 at 16:57
@Nic If you open your console and run the fiddle, you will see the console entries. – Scott Marcus Nov 18 '16 at 16:59
I see that. I mean on my site it doesn't work. Nothing fires. – Nov 18 '16 at 17:01
@Nic Then, you must have other code that has errors in it which is preventing this code from being processed. – Scott Marcus Nov 18 '16 at 17:01

score 0 · Answer 2 · answered Nov 18 '16 at 16:30

0

Try passing in the event and using e.preventDefault()

$(document).ready(function() {
    $('form').submit(function(e) {
        e.preventDefault();
        console.log("hi")
        if ($(this).valid()) {
            $(this).submit(function(){
                return false;
            });
        }
    });
});

answered Nov 18 '16 at 16:30

Graham Hency

61
4

It still submits multiple times. – Nov 18 '16 at 16:35

score 0 · Answer 3 · answered Nov 18 '16 at 16:52

Correct me if I'm wrong but, shouldn't you just return; if it's valid, else stop submission like in the jQuery documentation's example.

$(document).ready(function() {
    $('form').submit(function(event) {
        console.log("hi")
        if ($(this).valid()) {
            return;
        }
        event.preventDefault();
    });
});

score 0 · Answer 4 · answered Nov 18 '16 at 18:21

After none of these answers worked I decided to give it another shot. This works for me.

$(document).ready(function() {
    $("form").submit(function (e) {
        var attr = $(this).attr('submitted');
        if (typeof attr === typeof undefined || attr === false) {
            if ($(this).valid()) {
                $(this).attr('submitted', 'submitted');
                $(this).submit();
            } else {
                e.preventDefault();
            }
        } else {
            e.preventDefault();
        }
    });
});

You can get rid if both else branches. You dont need downvoting just everything. You may mark your answer as accepted if thats the fact. — alariva, Nov 18 '16 at 18:30

Prevent form from submitting multiple times

4 Answers4