JS / JQuery form submit delay

Question

I'm trying to delay the submission of a form but only when i trigger the submit after the delay it does not send the post values.

this is my html

<form id="form_anim" name="form" autocomplete="off" action="index.php" method="POST">
    <input name="username" id="username" type="text" placeholder="Nome utente" autofocus required>
    <input name="password" id="password" type="password" placeholder="Password" required>
    <a href="#">Hai dimenticato la password?</a>
    <input id="invio" name="invio" type="submit" value="Accedi">
</form>

and this is the script

   $('#form_anim').on('submit', function (event, force) {
    if (!force) {
        var $this = $(this);
        event.preventDefault();
        setTimeout(function () {
            $this.trigger('submit', true);
        }, 2000);
    }
});

help me please.

possible duplicate of [JS /JQuery Form Submit Delay?](http://stackoverflow.com/questions/5100726/js-jquery-form-submit-delay) Haha I love how the name of both these questions are IDENTICAL — ctwheels, May 28 '15 at 15:07
i need to animate the form-box before the login,i removed that parta from the code because that's note the problem — gabricom, May 28 '15 at 15:08
@vsync `force` is an extra made-up parameter to the event. It'll usually be undefined, but when he calls `trigger` with the extra parameter, it should pass that in; at least, according to the JQuery docs. — Katana314, May 28 '15 at 15:09
@Katana314 - but why..would you go **all** the way to trigger the event again when you are already inside the function and you could call the form submit directly using native DOM? doesn't make any sense — vsync, May 28 '15 at 16:45
@vsync Don't ask me. I was just responding to your "you cannot possibly use `force`" comment. — Katana314, May 28 '15 at 17:24

score 2 · Answer 1 · edited Jun 20 '20 at 09:12

2

This will effectively submit your form with a delay.

$('#form_anim').on('submit', function (e) {
    var form = this;
    setTimeout(function () {
        form.submit();
    }, 2000);
    return false;
});

(btw, you don't need jQuery for this, unless you want to support IE8 and below)

Demo page

Monitor your network (via browser inspector) to see it in action

edited Jun 20 '20 at 09:12

Community

1
1

answered May 28 '15 at 20:55

vsync

118,978
58
307
400

score -1 · Answer 2 · edited May 28 '15 at 15:14

-1

note sure if you meant to submit twice?

$('#form_anim').on('submit', function(event, force) {
    if (!force) {
        var $this = $(this);
        setTimeout(function() {
            event.preventDefault();
            $this.trigger('submit', true);
        }, 2000);
    }
});

edited May 28 '15 at 15:14

Vince

3,207
1
17
28

answered May 28 '15 at 15:07

stackoverfloweth

6,669
5
38
69

1

First prevent default, than do fancy stuff. Also giving an answer without knowing what is that force argument... – Roko C. Buljan May 28 '15 at 15:08

Ragnar · Answer 3 · 2015-05-28T15:26:00.013

-1

I recommend you to use a button without type="submit":

<button id="send">Send</button> 

$('#send').on('click', function(event) {                       
    setTimeout(function() {
       $('#form_anim').submit();
    }, 2000);        
});

edited May 28 '15 at 15:26

answered May 28 '15 at 15:09

Ragnar

4,393
1
27
40

yeah sorry i copied the wrong code; i wanted to copy the code you just posted, but it's not working; he send the submit but no post values – gabricom May 28 '15 at 15:12
The problem is that you are canceling the submit each time – Ragnar May 28 '15 at 15:15
no, i checked with php and the submission is triggered but no values in $_POST. If i trigger the submit just before the timeout it works but obviously with no delay.If you have a solution please tell me,i'm trying to fix this for about 2 hours. – gabricom May 28 '15 at 15:19
just tried.Not working, but now i know the problem is not the delay itself but the .trigger("submit"). – gabricom May 28 '15 at 15:24
$('#form_anim').trigger('submit', true); don't post values,even if not delayed. if i submit the form in the normal way with the input type="submit" post values are sent. – gabricom May 28 '15 at 15:26
try using $('#form_anim').submit(); – Ragnar May 28 '15 at 15:26
that's wrong. you shouldn't do that. the right way is to bind a submit even on the form itself. never the button, whom it's it's default behavior – vsync May 28 '15 at 20:47
@vsync this is not wrong, because it works, I like to use .submit() – Ragnar May 28 '15 at 23:00
"works" doesn't mean it's not "wrong". for example, to stop global warming, killing every human being on the planet would work. But of course, it's a very good idea, specifically for that problem. but in general, it's a bad idea. Also, voting my answer down, out of anger is childish – vsync May 29 '15 at 09:08
In can say the same to you, because you voted down my answer too.. and there is no difference between my answer and your answer. – Ragnar May 29 '15 at 15:05

score -1 · Answer 4 · answered May 28 '15 at 15:25

Try following code It works smoothly

<form onsubmit="return delay('1')" id="form_anim" name="form" autocomplete="off" action="#" method="get">
    <input name="username" id="username" type="text" placeholder="Nome utente" autofocus required>
    <input name="password" id="password" type="password" placeholder="Password" required>
    <a href="#">Hai dimenticato la password?</a>
    <input id="invio" name="invio" type="submit" value="Accedi"/>
</form>

Javascript

<script>
    function delay(a){
        if(a == 1){
            setTimeout(delay(2),2000);
            return false;
        }
        else{
            $("#form_anim").submit();
        }
    }
</script>

JS / JQuery form submit delay

4 Answers4

Demo page