Js:éviter que le bouton du formulaire soit cliquer plusieurs fois

Résolu/Fermé
ananias8686 Messages postés 86 Date d'inscription samedi 9 février 2019 Statut Membre Dernière intervention 19 août 2023 - 12 avril 2020 à 09:40
ananias8686 Messages postés 86 Date d'inscription samedi 9 février 2019 Statut Membre Dernière intervention 19 août 2023 - 12 avril 2020 à 21:32
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:
$(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:

2 réponses

jordane45 Messages postés 38138 Date d'inscription mercredi 22 octobre 2003 Statut Modérateur Dernière intervention 17 avril 2024 4 649
12 avril 2020 à 10:31
Bonjour,
Pourquoi ne pas désactiver le bouton une fois celui-ci appuyé ?
(juste avant le $.ajax )
$('#id_de_ton_bouton').prop('disabled', true);


1
ananias8686 Messages postés 86 Date d'inscription samedi 9 février 2019 Statut Membre Dernière intervention 19 août 2023
12 avril 2020 à 11:26
J'ai essayer mais ça ne marche pas, quand je clique plusieurs fois, je reçoit plusieurs mails
$(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"
  });
});
0
ananias8686 Messages postés 86 Date d'inscription samedi 9 février 2019 Statut Membre Dernière intervention 19 août 2023
12 avril 2020 à 11:41
Merci beaucoup, ça marche mais après envoie du formulaire et obtention de l'alerte sweet, le bouton est toujours désactivé, l'utilisateur dois réactualiser la page avant qu'il ne soit de nouveau active. Auriez vous un moyen pour réactiver le bouton automatiquement après envoie du formulaire ?
0
jordane45 Messages postés 38138 Date d'inscription mercredi 22 octobre 2003 Statut Modérateur Dernière intervention 17 avril 2024 4 649 > ananias8686 Messages postés 86 Date d'inscription samedi 9 février 2019 Statut Membre Dernière intervention 19 août 2023
12 avril 2020 à 13:24
Ben oui dans le success de ton Ajax tu réactive le bouton
0
ananias8686 Messages postés 86 Date d'inscription samedi 9 février 2019 Statut Membre Dernière intervention 19 août 2023
12 avril 2020 à 21:32
C'est bon, ça a marcher. Merci beaucoup
0