Delay form submission after preventDefault()

Question

I am trying to attach an event listener on each form element, then check if they are submitted. I do not want the form to submit, but instead wait for 1 second before it does so. While the form has been submitted, I want it to console.log() the result from the form. The code below should work, but it does not:

$("form").each(function() {
    $(this).on("submit", function(e) {
        e.preventDefault();
        var form = $(this);
        setTimeout(function() {
            form.submit();
        }, 1000);
        var data = $(this).serialize();
        console.log(data);
    });
});

The problem I get is either it keeps the event listener up, so it basically runs into an infinite loop or it doesn't submit the form. What am I doing wrong?

EDIT: For all of you downvoting this: Why? I know I should not introduce latency to the form submission, but this is for my own project and I am perfectly fine with waiting a second.

Answer 1

The problem is that form is the jQuery object, so form.submit() runs the jQuery submit handler, and causes the infinite loop. You want to call the browser's native submit code. Do that with:

var form = $(this).get(0);

This sets form to the DOM element rather than a jQuery object, and form.submit() will submit the form without going through the jQuery handler.

Answer 2

$("form").each(function() {
    $(this).on("submit", function(e) {
        if(!$(this).hasClass("submitted")) {
            e.preventDefault();
            var form = $(this);
            setTimeout(function() {
                form.submit();
            }, 1000);
            var data = $(this).serialize();
            console.log(data);
            $(this).addClass("submitted");
        }
    });
});

You could try something like this, if you really need to do so.

Answer 3

     bool someflag=true    
     $("form").each(function() {
        $(this).on("submit", function(e) {
        if (someflag){        
                e.preventDefault();
                someflag=false;
        }
                var form = $(this);
                setTimeout(function() {
                    form.submit();
                }, 1000);
                var data = $(this).serialize();
                console.log(data);
            });
        });

Answer 4

I believe this will work. The form submittion is delayed one second. You will have to remove the timeout after the form is submitted.

$("form").each(function() {

    $(this).on("submit", function(e) {
        e.preventDefault();
        var form = $(this);
        var data = $(this).serialize();
        setTimeout(function() {
          console.log(data);
          form.submit();
        }, 1000);
    });

});

Answer 5

var submitted = false;
$("form").each(function() {
    $(this).on("submit", function(e) {
        if(!submitted) {
            e.preventDefault();
            setTimeout(() => {
                $(this).submit();
            }, 1000);
            var data = $(this).serialize();
            console.log(data);
            submitted = true;
        }
    });
});

This works as it should. I was hoping for a better solution, but if it works it works.