延迟表单提交并显示重定向叠加div

时间:2016-04-24 00:25:50

标签: javascript jquery html css forms

我有一个通过javascript onmousedown提交的表单,我希望在整个页面上显示一个叠加div,持续5秒钟,请等待重定向"表单之前或期间的消息将提交给表单中提到的URL。这是我的代码

<form method="POST" action="formsubmit.php" id="mainForm" target="_parent">
<label for=fname>Name</label><br/>
<input name="fname" id="fname" type="text" /><br>
<label for=email>Email address</label><br/>
<input name="email" id="email" type="text" /><br>
<input type="button" id="formbutton" value="Submit" onmousedown="sendForm()">
</form>

我的javascript函数是

function sendForm()
{
var contin = 1;
var alertmessage = "";
var eValue = $("#email").val();
var dot1=eValue.lastIndexOf(".");
var at1=eValue.indexOf("@");
if (at1<1 || dot1<at1+2 || dot1+2>=eValue.length || eValue.length < 7)
{
alertmessage += "Please enter a valid email\n";
  contin = 0;
}
if ($("#fname").val().length < 3)
 {
  alertmessage += "Please enter a name\n";
  contin = 0;
 } if (contin == 1)
 {
  if (document.getElementById("formbutton")) $("#formbutton").hide();
$("#mainForm").submit();
 }
 else alert(alertmessage);
}

我看到了很多线程,但我不确定如何在现有的javascript函数中包含该功能,所以我用我的确切代码问了这个问题。感谢

1 个答案:

答案 0 :(得分:0)

我能够解决我的问题,所以如果有人寻找相同的答案,这就是我必须做的事情

<style>
#waitingredirCover {
    background: url("http://www.aveva.com/Images/ajax-loader.gif") no-repeat scroll center center #FFF;
    position: fixed;
    height: 100%;
    width: 100%;
    text-align: center;
    z-index: 9999;
    top:        0;
    left:       0;
}
</style>


function stopRKey(evt) {
  var evt = (evt) ? evt : ((event) ? event : null);
  var node = (evt.target) ? evt.target : ((evt.srcElement) ? evt.srcElement : null);
  if ((evt.keyCode == 13) && (node.type=="text"))  {return false;}
}
document.onkeypress = stopRKey;

function sendForm()
{
var contin = 1;
var alertmessage = "";
var eValue = $("#email").val();
var dot1=eValue.lastIndexOf(".");
var at1=eValue.indexOf("@");
if (at1<1 || dot1<at1+2 || dot1+2>=eValue.length || eValue.length < 7)
{
alertmessage += "Please enter a valid email\n";
  contin = 0;
}
lcpsExitPopupOn = 0;
if ($("#fname").val().length < 3)
 {
  alertmessage += "Please enter a name\n";
  contin = 0;
 } if (contin == 1)
 {
  if (document.getElementById("formbutton")) $("#formbutton").hide();
document.getElementById("waitingredirCover").style.display = "block";
    setTimeout(function() {
        $("#mainForm").submit();
    }, 5000);
 }
 else alert(alertmessage);
}

<div id="waitingredirCover" style="display:none;"><h3>Please wait! You are being redirected to your page.</h3></div>