0

Web フォームで 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 
$(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

わかりました、アルサヒンとクンダンからの他の2つの回答に触発されて、私は自分でそれを理解しました:

変更する必要があるのは、ajax が検証の失敗を処理する方法だけです。だから私は変わった

failure : function() {}

に

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

そのため、ユーザーが [送信] ボタンをクリックするたびにポップアップ "処理中" div が実際に表示されますが、フォームが検証に合格しない場合は非表示にリセットされます。

現在のコードに満足していますが、より良いアイデアがあれば教えてください。

于 2012-06-23T05:51:38.710 に答える
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 に答える