AJAX Formulaire comment afficher le chargement gif

Question

J'ai fait écrire ce formulaire de soumission AJAX avec le plugin de validation jQuery. Tout fonctionne parfaitement, mais j'ai remarqué que les gens soumettent de nouveau le formulaire avant la fin du script et que cela entraîne des doublons dans notre base de données. Voici le code que j'ai jusqu'à présent:

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

Quelqu'un peut-il me expliquer comment augmenter ce code pour mettre un gif de chargement dans mes résultats div jusqu'à ce que mon script est terminé et le chargement gif est remplacé par mes résultats réels ? Je pense que cela va décourager les gens de double-cliquer sur le bouton Soumettre.

Answer 1

Dans votre fonction submitHandler, vous pouvez cacher votre formulaire avant que le processus de l'appel $.post, puis dans la fonction de rappel de $.post, reétrenner votre formulaire, et fais tout ce que tu veux.

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 2

Quelque chose comme ça ferait l'affaire. Je désactive également le bouton de soumission jusqu'à la fin du post pour éviter les doublons.

$('#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 rappel est exécuté en cas de succès ou d'erreur si vous activez le bouton et de masquer l'indicateur dans toute situation.

Answer 3

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

ou exactement dans ce cas

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