Question

我在网络表单上使用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？

非常感谢你的帮助。

Answer 1

如果您使用的是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

Answer 2

$(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;" />

Answer 3

好的，受到alsahin和Kundan的另外两个答案的启发，我自己想出来了：

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

failure : function() {}

到

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

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

我对目前的代码感到满意，但如果您有任何更好的想法，请告诉我。

ajaxSubmit表单验证与弹出“处理”div

3 个答案: