CODEWITHSUNDEEP
jqueryajaxformsvalidationloading
aadu
aadu

Reputation: 3254

AJAX Form how to display loading gif

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.

Upvotes: 2

Views: 3189

Answers (3)

Goldie
Goldie

Reputation: 1630

$("#myform").submit(function(){
    $('#results').html('<img src="gifUrl" />');
});

or exactly in this case

submitHandler: function(form) {
    $('#results').html('<img src="gifUrl" />');
    $.post('process_participant.php', $("#myform").serialize(), function(data) {
        $('#results').html(data);
    });
    }

Upvotes: -1

Claudio Redi
Claudio Redi

Reputation: 68440

Something like this would do the trick. I'm also disabling the submit button until the post finish so you avoid duplicated submitions.

$('#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 callback is executed in case of success or error so you enable the button and hide the indicator in any situation.

Upvotes: 2

jbrtrnd
jbrtrnd

Reputation: 3833

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

Upvotes: 0

Related Questions