如何延迟表单提交?

时间:2014-08-13 12:22:30

标签: javascript jquery html forms

我有一个表单,一旦用户点击提交按钮 - 它运行2个功能 - (1)它弹出一个div,表示'项目成功添加到购物篮'然后(2)一个预填充功能,发送选定的Mals-E购物车的选项。

它有效,但我需要做的是不要让表单提交,直到弹出窗口显示大约5秒钟 - 当前它会闪烁一瞬间,因为表格会立即提交预填充功能。

有人可以帮忙吗?

下面的脚本:

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 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>

2 个答案:

答案 0 :(得分:4)

试试这个:

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

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

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

工作jsfiddle:http://jsfiddle.net/njoqnwwf/

答案 1 :(得分:0)

您可以使用Jquery

$(function(){     $( '#形式')延迟(毫秒).submit()。 });