How to delay form submit?

Question

I have a form that once the user clicks the Submit button - it runs 2 functions - (1) it pops up with a div that says 'Item added successfully to basket' then (2) a prefill function that sends the selected options to a Mals-E cart.

It works, but what i need to do is not let the form submit until the popup has shown for around 5 seconds - currently it flashes for a split second as the form is submitted immediately with the prefill function.

Can anyone help with this please?

Script Below:

function showDiv(f) {   
    document.getElementById('basket-center').style.display='block';
}   

function prefill(f) {

    var val = document.forms["basket"].elements["product[2]"].value;
    val = val + gettext(document.forms["form"].elements['users']);
    document.forms["basket"].elements["product[2]"].value = val;

    document.forms["basket"].elements["price"].value = document.forms["form"].elements['sum'].value;

    return false;
}

Form Script Here:

<form id="basket" name="basket" action="http://ww8.aitsafe.com/cf/add.cfm" method="post" onsubmit="showDiv(); prefill();">
    <input name="userid" type="hidden" value="A1251773"/>
    <input type="hidden" name="nocart"/>
    <input name="product[]" type="hidden" value="{b}Sage 50 Accounts (The VAT Edition) 2014{/b}"/>
    <input name="product[2]" type="hidden" value="{br}"/>
    <input name="product[3]" type="hidden" value="{br}FREE Installation onto 1 Server/PC & Same Day Download when ordered before 3pm"/>
    <input name="price" type="hidden" value=""/>
    <input name="noqty" type="hidden" value="1"/>
    <input name="thumb" type="hidden" value="sage50-thumb.png"/>
    <input name="return" type="hidden" value="http://10.10.0.195/reality-solutions-development/sage-50-accounts.php"/>
    <input type="image" src="img/buynow-button-green.jpg" border="0" alt="Buy Now" style="float:right; margin-top:-24px"/> 
</form>

tried this: setTimeout(function() { prefill(); }, 5000); but not the best at JS so wasn't sure where to place it — Daniel Palmer, Aug 13 '14 at 12:29
then dont do submit, instead go with OnClick on image button and submit form through javascript.. — Amit Soni, Aug 13 '14 at 12:30
This might help: http://stackoverflow.com/questions/951021/what-do-i-do-if-i-want-a-javascript-version-of-sleep — Deep-B, Aug 13 '14 at 12:30
@DanielPalmer, you have an action associated with this `form` like you actually want to submit that action; is that true? — Mike Perrenoud, Aug 13 '14 at 12:30
@MichaelPerrenoud - yes i need the form to submit but show the popup div for 5 seconds before the form actually submits — Daniel Palmer, Aug 13 '14 at 12:49

Christian Benseler · Answer 1 · 2019-10-28T17:46:32.207

5

Try this:

//html
<form id="my_form">
    <button id="my_button">submit</button>
</form>

//javascript
var my_form = document.getElementById("my_form"), button = document.getElementById("my_button");
my_form.onsubmit = function() {
    return false;
}

button.onclick = function() {
 setTimeout(function() {
    my_form.submit();
 }, 5000);
   return false;
}

Working jsfiddle: http://jsfiddle.net/njoqnwwf/

edited Oct 28 '19 at 17:46

answered Aug 13 '14 at 12:31

Christian Benseler

7,216
6
33
58

can't get this to work on my script for some reason :( – Daniel Palmer Aug 13 '14 at 12:43
1

There is a typo in the answer. The second JavaScript line should reference `form`, not `my_form` variable. `my_form` was the ID of the element. – Voicu Sep 12 '19 at 16:03

score 0 · Answer 2 · answered Aug 13 '14 at 12:31

0

You could use Jquery for that

$(function() { $('#form').delay(milliseconds).submit(); });

answered Aug 13 '14 at 12:31

codebased

6,488
7
42
78

this just submits for the form every 5 seconds - i want it to only submit once - after the user clicks the submit button it needs to wait 5 seconds then submit the form – Daniel Palmer Aug 13 '14 at 12:54

How to delay form submit?

2 Answers2