Question

I have this AJAX submission form written with the jQuery validation plugin. It all works perfectly but I’ve noticed that people are re-submitting the form before the script is finished and it’s causing duplicate records in our database. Here is the code I have so far:

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

Can anyone explain to me how to augment this code to put a loading gif into my results div until my script is finished and the loading gif is replaced with my actual results? I think it will discourage people from double clicking the submit button.

Answer 1

In your submitHandler function, you can hide your form before process the $.post call, then in the callback function of $.post, re-show your form, and do all the things you want.

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