2

このAJAX送信フォームはjQuery検証プラグインで作成されています。すべてが完全に機能しますが、スクリプトが終了する前にフォームを再送信しているため、データベースに重複レコードが発生していることに気付きました。これが私がこれまでに持っているコードです：

$(document).ready(function(){
$("#myform").validate({
    debug: false,
    rules: {
        fname: {required: true}, 
        sname: {required: true}, 
        sex: {required: true}, 
    },
    messages: {
        fname: {required: "- Field required."},
        sname: {required: "- Field required."},
        sex: {required: "- Field required."},
    },
    errorPlacement: function(error, element) {
        if ( element.is(":radio") ) {
        error.appendTo('.radioError');
        }
        else {
        error.insertAfter( element );
        }
    },
    submitHandler: function(form) {
        $.post('process_participant.php', $("#myform").serialize(), function(data) {
            $('#results').html(data);
        });
        }
    });
});

スクリプトが終了し、読み込み中のgifが実際の結果に置き換えられるまで、このコードを拡張して読み込み中のgifを結果divに配置する方法を誰かに説明できますか？送信ボタンをダブルクリックするのを思いとどまらせると思います。

4

3 に答える 3

2

このようなものがうまくいくでしょう。また、投稿が完了するまで送信ボタンを無効にして、重複送信を回避します。

$('#mySubmitButton').prop('disabled',true); // Disable submit button
$('#myAjaxIndicator').show(); // Show ajax indicator

$.post('process_participant.php', $("#myform").serialize(), function(data) {
   $('#results').html(data);
})
.complete(function() { 
   $('#mySubmitButton').prop('disabled',false); // Enable submit button
   $('#myAjaxIndicator').hide(); // Hide ajax indicator
});

completeコールバックは成功またはエラーの場合に実行されるため、どのような状況でもボタンを有効にしてインジケーターを非表示にします。

于 2012-06-19T15:30:28.933 に答える
0

関数では、呼び出しをsubmitHandler処理する前にフォームを非表示に$.postしてから、 のコールバック関数で$.postフォームを再表示し、必要なことをすべて実行できます。

submitHandler: function(form) {
    $("#myform").hide(); // Hide the form
    // Here you can insert a loading pic
    $.post('process_participant.php', $("#myform").serialize(), function(data) {
        // Here you can remove the loading pic
        $("#myform").show(); // Show the form
        $('#results').html(data);
    });
}
于 2012-06-19T15:34:20.010 に答える
-1 
$("#myform").submit(function(){
    $('#results').html('<img src="gifUrl" />');
});

またはまさにこの場合

submitHandler: function(form) {
    $('#results').html('<img src="gifUrl" />');
    $.post('process_participant.php', $("#myform").serialize(), function(data) {
        $('#results').html(data);
    });
    }
于 2012-06-19T15:33:18.853 に答える