javascript - 提交时未调用微调器

Question

我正在使用 javascript 来验证一个名为 theForm 的表单，并在验证并提交表单后显示一个微调器。方法是 POST 和 ACTION 到一个单独的页面。验证有效，但我无法让微调器工作。我可以在单击提交按钮时调用这两个脚本吗？

的JavaScript：

 <script type="text/javascript">        
 $(function() {

 $('#theForm').on("submit", function () {

    setTimeout(function () {

          $('#loading').show();

    }, 100);

  });
  });

 </script>
 <script type="text/javascript">    

 function validateRegForm()
{

var emailfield=document.forms["theForm"]["email"].value;
if (emailfield==null || emailfield=="")
{
alert("Please enter your email address");
return false;
}

if (confirmemailaddress==null || confirmemailaddress=="")
{
 alert("Please confirm your email address");
return false;
}
}
</script>

然后是隐藏的 div：

 <div id="loading" style="display:none;
    background: url('hand_timer4.gif') no-repeat 5px 3px;
    position:fixed;
    left:0;
    top:0;
    width:100%;
    height:100%;
    background:rgba(255,255,255,0.8);
    z-index:1000" >


  <div style="position:fixed; top:50%; left:50%; width:600px; overflow-y:auto;     
  height:400px; margin-top: -200px; margin-left: -300px; font-size:12px;    
   text-align:center; padding-left:10px; padding-right:10px; padding-top:10px; 
  color:black">
    <img src="images/hand_timer4.gif" alt="loading" /><br><br>
        <p>Your account is being created. Please be patient...</p>  
  </div>
  </div>

谢谢

Answer 1

1. 你加载 jQuery 吗？
2. 您是否已经有用于验证的内联 onsubmit
3. 提交表单会加载一个新页面并卸载当前页面。您可能需要考虑 AJAX

这是一种更清洁的方法

<script type="text/javascript" src="jquery.js"></script>        

<script type="text/javascript">        
$(function() {

  $('#theForm').on("submit", function () {

    var emailfield=$("#email"].val(); // assuming the field has an ID
    if (emailfield=="") {
      alert("Please enter your email address");
      return false;
    }
    var confirmemailaddress=$("#confirmemailaddress"].val(); // assuming the field has an ID
    if (confirmemailaddress=="" ||emailfield != confirmemailaddress) {
      alert("Please confirm your email address");
      return false;
    }
    $('#loading').show();
    return true;
  });
});
</script>