ajaxSubmit表單驗證彈出「處理」div

我在web表單上使用ajaxSubmit。我還需要在用戶點擊提交時彈出一個顯示「處理請求」的div，並使用變暗的背景。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？

非常感謝您的幫助。

來源

2012-06-21 yokeholy

爲什麼要在驗證完成後顯示「Processing」div *？ –

那麼，因爲處理腳本（processor.aspx）需要一段時間才能在用戶等待重定向到登錄頁面（Thankyou.aspx）時運行。 – yokeholy

如果您使用jQuery 1.4版本或以上試試這個：

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

，或者如果您使用較少的jQuery 1.4的版本試試這個

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

記住把所有這些東西在文件。準備好了

來源

2012-06-21 17:28:05

我應該在哪裏插入這段代碼？還是我用這個替換現有的代碼？ – yokeholy

只是把這段代碼放在腳本標籤之間。 –

$(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-21 17:33:43 alsahin

謝謝你的回答。我試過這段代碼，它似乎預防默認提交操作不起作用，或者我應該說，驗證不起作用。 – yokeholy

@yokeholy編輯：輸入＃發送而不是按鈕＃發送 – alsahin

好吧，靈感來自alsahin和Kundan的另外兩個答案，我想到了m我自己：

唯一需要改變的是ajax如何處理驗證失敗。因此，我改變

failure : function() {}

到

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

這樣在彈出的「處理」除實際顯示Submit按鈕每次用戶點擊，但重置爲隱藏，如果表單未通過驗證。

我很滿意我目前的代碼，但如果您有更好的想法，請告訴我。

來源

2012-06-23 05:51:38 yokeholy

ajaxSubmit表單驗證彈出「處理」div

回答

相關問題