2

我有这个用 jQuery 验证插件编写的 AJAX 提交表单。这一切都很完美，但我注意到人们在脚本完成之前重新提交表单，这导致我们的数据库中出现重复记录。这是我到目前为止的代码：

$(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 放入我的结果 div 直到我的脚本完成并且加载 gif 被我的实际结果替换？我认为这会阻止人们双击提交按钮。

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 回答