0

我在我的网络表单上使用 ajaxSubmit。我还需要在用户单击提交时弹出一个显示“正在处理请求”的 div，其背景变暗。

我现在使用的代码是这样的：

<script type="text/javascript">
$(document).ready(function() {
    $("#CustomerService").validationEngine({
        ajaxSubmit: true,
        ajaxSubmitFile: "processor.aspx",
        success :  function() {window.location.replace("Thankyou.aspx")},
        failure : function() {}
    })
});
</script>

<script type="text/javascript">
function DimScreen()
{
    document.getElementById("DimBlackScreen").style.visibility = "visible";
}
</script>

我的提交按钮的 HTML 部分：

<input type="submit" value="Submit" id="Send" name="Send" style="cursor:pointer;" onclick="DimScreen();" />

那么这里的问题是：表单是否通过验证，弹出的div总是会出现，这不是我想要的情况。

有没有办法让它检测表单验证是否通过然后显示 div？

非常感谢您的帮助。

4

3 回答 3

0

如果您使用的是 jquery 1.4 或更高版本，请尝试以下操作：

$(document).ajaxStart(function() {
   $("#DimBlackScreen").show();
}).ajaxStop(function() {
   $("#DimBlackScreen").hide();
});

或者如果您使用较少版本的 jquery 1.4 试试这个

$().ajaxStart(function() {
   $("#DimBlackScreen").show();
}).ajaxStop(function() {
   $("#DimBlackScreen").hide();
});

记住把所有这些东西放在 document.ready

于 2012-06-21T17:28:05.683 回答
0 
$(document).ready(function() {
    $("input#Send").click(function(e){
      e.preventDefault(); //prevent default submit action,, use ajax instead
      $('#DimBlackScreen').show();
      $("#CustomerService").validationEngine({
        ajaxSubmit: true,
        ajaxSubmitFile: "processor.aspx",
        success :  function() {
             $('#DimBlackScreen').hide();
             window.location.replace("Thankyou.aspx"); //or $('body').html('Thank you!');

        },
        failure : function() {}
       });// end validationEngine
 }); //end click

});//end document.ready

<input type="submit" value="Submit" id="Send" name="Send" style="cursor:pointer;" />
于 2012-06-21T17:33:43.043 回答
0

好的，受 alsahin 和 Kundan 的其他两个答案的启发，我自己想通了：

唯一需要改变的是ajax如何处理验证失败。所以我改变了

failure : function() {}

到

failure : function() {document.getElementById("DimBlackScreen").style.visibility = "hidden";}

因此，每次用户单击提交按钮时，弹出的“处理” div 实际上会显示，但如果表单未通过验证，则会重置为隐藏。

我对我当前的代码很满意，但是如果您有更好的想法，请告诉我。

于 2012-06-23T05:51:38.710 回答