Question

我有这个用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被替换为我的实际结果？我认为它会阻止人们双击提交按钮。

Answer 1

这样的事情可以解决问题。我也禁用提交按钮，直到帖子结束，这样你就可以避免重复的副作用。

$('#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回调，因此您可以在任何情况下启用该按钮并隐藏指示符。

Answer 2

在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);
    });
}

Answer 3

$("#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);
    });
    }

AJAX表单如何显示加载gif

3 个答案: