Js:éviter que le bouton du formulaire soit cliquer plusieurs fois
Résolu
ananias8686
Messages postés
86
Date d'inscription
Statut
Membre
Dernière intervention
-
ananias8686 Messages postés 86 Date d'inscription Statut Membre Dernière intervention -
ananias8686 Messages postés 86 Date d'inscription Statut Membre Dernière intervention -
Bonjour,
J'ai fais un petit formulaire de contact. Le but est d'envoyer un mail php à partir de ce formulaire html sans recharger la page et envoyer une alerte de réussite et d'erreur avec SweetAlert. Tout marche bien, par contre lorsque l'utilisateur clique plusieurs fois sur le bouton Send, je reçois plusieurs formulaire par mail, comment éviter ce problème ?
j'aimerai avoir une solution pour éviter que le bouton du formulaire soit cliquer plusieurs fois par les utilisateurs.
J'ai essayé plusieurs solution et aucune ne fonctionnait correctement.
Voici mon code js:
J'ai fais un petit formulaire de contact. Le but est d'envoyer un mail php à partir de ce formulaire html sans recharger la page et envoyer une alerte de réussite et d'erreur avec SweetAlert. Tout marche bien, par contre lorsque l'utilisateur clique plusieurs fois sur le bouton Send, je reçois plusieurs formulaire par mail, comment éviter ce problème ?
j'aimerai avoir une solution pour éviter que le bouton du formulaire soit cliquer plusieurs fois par les utilisateurs.
J'ai essayé plusieurs solution et aucune ne fonctionnait correctement.
Voici mon code js:
$(document).ready(function(){
$('#contact-form').on('submit',function(e) { //Don't foget to change the id form
$.ajax({
url:'contact.php', //===PHP file name====
data:$(this).serialize(),
type:'POST',
success:function(data){
console.log(data);
//Success Message == 'Title', 'Message body', Last one leave as it is
swal("¡Success!", "Message sent!", "success");
//pour vider les champs aprèssuccèssubmit
document.forms['contact-form'].reset();
},
error:function(data){
//Error Message == 'Title', 'Message body', Last one leave as it is
swal("Oops...", "Something went wrong :(", "error");
}
});
e.preventDefault(); //This is to Avoid Page Refresh and Fire the Event "Click"
});
});
A voir également:
- Js:éviter que le bouton du formulaire soit cliquer plusieurs fois
- Arrondi js ✓ - Forum Windows
- Copiez l'image dans un logiciel d'édition d'images ou un outil en ligne comme js paint ou pixlr e. remplissez les cases en suivant le code couleur. des cases supplémentaires vont se remplir automatiquement. que représente le dessin ? ✓ - Forum Windows
- Remplir une case de tableau avec une couleur grise avec texture de pointillés ✓ - Forum Photoshop
- Reproduction d'un dessin - Forum Graphisme
- Js/kryptik.ad ✓ - Forum Virus
$(document).ready(function(){ $('#contact-form').on('submit',function(e) { //Don't foget to change the id form $('#contact-form').prop('disabled', true); $.ajax({ url:'contact.php', //===PHP file name==== data:$(this).serialize(), type:'POST', success:function(data){ console.log(data); //Success Message == 'Title', 'Message body', Last one leave as it is swal("Succès!", "Demande envoyer! Nous vous contacterons le plus rapidement possible", "success"); //pour vider les champs aprèssuccèssubmit document.forms['contact-form'].reset(); }, error:function(data){ //Error Message == 'Title', 'Message body', Last one leave as it is swal("Erreur...", "Vérifier votre connexion Internet et réessayer :(", "error"); } }); e.preventDefault(); //This is to Avoid Page Refresh and Fire the Event "Click" }); });