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.

why would you delay it may I ask?

vsync
– vsync

2015-05-28 15:05:52 +00:00
Commented May 28, 2015 at 15:05 — vsync
– vsync, Commented May 28, 2015 at 15:05
Why Submitting form twice?

Tushar
– Tushar

2015-05-28 15:06:30 +00:00
Commented May 28, 2015 at 15:06 — Tushar
– Tushar, Commented May 28, 2015 at 15:06
also, what is force ? you cannot possibly use it

vsync
– vsync

2015-05-28 15:06:35 +00:00
Commented May 28, 2015 at 15:06 — vsync
– vsync, Commented May 28, 2015 at 15:06
It looks like you've already submitted the form...

Alex McMillan
– Alex McMillan

2015-05-28 15:06:42 +00:00
Commented May 28, 2015 at 15:06 — Alex McMillan
– Alex McMillan, Commented May 28, 2015 at 15:06
You're using $this before you define it

Reeno
– Reeno

2015-05-28 15:07:08 +00:00
Commented May 28, 2015 at 15:07 — Reeno
– Reeno, Commented May 28, 2015 at 15:07

Community · Accepted Answer · 2020-06-20 09:12:55Z

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, 2020 at 9:12

CommunityBot

11 silver badge

answered May 28, 2015 at 20:55

vsync

133k61 gold badges345 silver badges430 bronze badges

Sign up to request clarification or add additional context in comments.

Comments

Vince · Accepted Answer · 2015-05-28 15:14:01Z

-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, 2015 at 15:14

Vince

3,3181 gold badge20 silver badges30 bronze badges

answered May 28, 2015 at 15:07

stackoverfloweth

6,9275 gold badges44 silver badges75 bronze badges

1 Comment

Roko C. Buljan Over a year ago

First prevent default, than do fancy stuff. Also giving an answer without knowing what is that force argument...

Akshay Khale · Accepted Answer · 2015-05-28 15:25:38Z

-1

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>

answered May 28, 2015 at 15:25

Akshay Khale

8,3918 gold badges52 silver badges60 bronze badges

Comments

Ragnar · Accepted Answer · 2015-05-28 15:26:00Z

-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, 2015 at 15:26

answered May 28, 2015 at 15:09

Ragnar

4,6281 gold badge33 silver badges42 bronze badges

10 Comments

gabricom Over a year ago

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

Ragnar Over a year ago

The problem is that you are canceling the submit each time

gabricom Over a year ago

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 Over a year ago

just tried.Not working, but now i know the problem is not the delay itself but the .trigger("submit").

gabricom Over a year ago

$('#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.

|

Collectives™ on Stack Overflow

JS / JQuery form submit delay

4 Answers 4

Demo page

Comments

1 Comment

Comments

10 Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

4 Answers 4

Comments

1 Comment

Comments

10 Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related