javascript - 延迟表单提交和显示重定向覆盖div

Question

我有一个通过javascript onmousedown提交的表单，我想在表单提交到表单中提到的url之前或期间，在整个页面上显示覆盖div 5秒钟，并显示“请等待重定向”消息。这是我的代码

<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函数中包含该功能，所以我用我的确切代码问了这个问题。谢谢

Answer 1

我能够解决我的问题，所以如果有人要寻找相同的答案，这就是我要做的

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