créer un évément loading au click

Par muss, il y a 9 ans

Javascript

Bonjour,
J'ai suivi la vidéo "Valider un formulaire avec jquery " de Grafikart et que j'ai adapté en objet jquery . Mon soucis, c'est comment ajouter un loader ou un message annonce l'envoi du formulaire quand l'utilisateur clique sur le bouton "envoyer" , sur le même bouton la valeur du value du bouton submit change qui devient par exemple : envoi en cours . Et si les champs ne sont pas bien renseigner , la valeur du value redevient automatique au nom initial : envoyer
Vous trouverez mon code ci-dessous !
Merci

Voila je rencontre un petit problème avec mon code.

Ce que je fais

Décrivez ici votre code ou ce que vous cherchez à faire

app = { /* * Créer une popup * Fonction appelée au chargement du DOM */ init: function() { console.info("app.init"); // J'écoute le clic sur le bouton d'envoi... $("input[type=submit]").on("click", this.monSubmit); }, /* * Handler du submit */ monSubmit: function(e){ console.info("app.monSubmit") // On arrête le chargment de la page e.preventDefault() // Appel de la fonction pour la vérif... app.stopChamp() }, stopChamp: function(){ console.info("app.stopChamp") // La variable par défaut qui permettra de savoir si, // les champs sont valident ou non .. var valid = true if($("input[type=submit]")){ // Start test $("#envoi").attr("value", "Chargement ...").css({ opacity: 0.4 }).fadeIn(1000) if($("#identif").val() == "" ){ // On sélectionne le span qui à la class : error-message avec ".next" $("#identif").next(".error-message").fadeIn(2000).text("Veuillez bien renseigner le champ") valid = false } else if(!$("#identif").val().match(/^[a-z]+$/i)){ $("#identif").next(".error-message").fadeIn(2000).text("Nom dans l'url pas valide") } else{ $("#identif").next(".error-message").fadeOut(1000) } if($("#mail").val() == ""){ $("#mail").next(".error-message").fadeIn(2000).text("Veuillez bien renseigner l'email") valid = false } else if(!$("#mail").val().match(/^[a-z0-9._-]+@[a-z0-9._-]{2,}\.[a-z]{2,4}$/)){ $("#mail").next(".error-message").fadeIn(2000).text("Votre email n'est pas valide") } else{ $("#mail").next(".error-message").fadeOut(1000) } return valid }// End test } } /* * Chargement du DOM */ $(function(){ app.init(); })

Entourez votre code avec ce symbole ```

### Ce que je veux Décrivez ici ce que vous cherchez à obtenir ### Ce que j'obtiens Décrivez ici vos erreurs ou ce que vous obtenez à la place de ce que vous attendez :(

8 réponses

betaWeb, il y a 9 ans

Salut,

Quand tu soumets ton form, tu as bien les logs dans ta console ? Tu n'as pas d'erreurs ?

muss, il y a 9 ans

Salut,
Et non je n'ai pas d'erreur tout marche très bien ! Mais la valeur du value du bouton "envoyé" ne changre pas quand les champs ne sont bien renseignés pour redevenir "envoyé", cose que j'aimerais arriver à faire !
Mon form :

<form method="POST" action="traitement.php" class="form" novalidate> <div class ="identif"> <label for ="identif"></label> <span class =""> * </span> <input type ="text" name="identif" id="identif" placeholder="Ex : alouette.mignonne"/> <span class = "error-message">error</span> </div><!-- endidentif --> <div class="mail"> <label for="mail">Votre email :</label> <span class=""> *</span> <input type="email" name="mail" id="mail" placeholder="Ex: mignonne@hotmail.fr"/> <span class = "error-message">error</span> </div><!-- endmail --> <div class="sender"> <label for="envoi"> <input type="submit" id="envoi" value="Continuer ..." /> </label> </div> </form><!-- endForm -->
Kiv, il y a 9 ans

Salut !
Essai ceci :

app = { /* * Créer une popup * Fonction appelée au chargement du DOM */ init: function() { console.info("app.init"); // J'écoute le clic sur le bouton d'envoi... $("input[type=submit]").on("click", this.monSubmit); }, /* * Handler du submit */ monSubmit: function(e){ console.info("app.monSubmit") // On arrête le chargment de la page e.preventDefault() // Appel de la fonction pour la vérif... app.stopChamp() }, stopChamp: function(){ console.info("app.stopChamp") if($("input[type=submit]")){ // Start test // Appel au chargement app.btnProcess(); if($("#identif").val() == "" ){ // On sélectionne le span qui à la class : error-message avec ".next" app.showError($("#identif"), 'Veuillez bien renseigner le champ'); valid = false; } else if(!$("#identif").val().match(/^[a-z]+$/i)){ app.showError("#identif", "Nom dans l'url pas valide"); } else{ $("#identif").next(".error-message").fadeOut(1000) } if($("#mail").val() == ""){ app.showError($("#mail"), 'Veuillez bien renseigner le champ'); valid = false; } else if(!$("#mail").val().match(/^[a-z0-9._-]+@[a-z0-9._-]{2,}\.[a-z]{2,4}$/)){ app.showError("#mail", "Votre email n'est pas valide"); } else{ $("#mail").next(".error-message").fadeOut(1000); } return valid; }// End test }, showError: function(target,message){ $(target).next(".error-message").fadeIn(2000).text(message); // Vu que l'on a une erreur... app.btnInit(); // On réinitialise le bouton submit }, btnProcess: function(){ $("#envoi").attr("value", "Chargement ...").css({opacity: 0.4}).fadeIn(1000); }, btnInit: function(){ $("#envoi").attr("value", "Continuer...").css({opacity:1}).fadeIn(1000); } } /* * Chargement du DOM */ $(function(){ app.init(); })

Je t'ai créé 3 nouvelles méthodes :
showError(), btnProcess() et btnInit().
, mais bon ça peut encore s'améliorer. d'ailleurs j'aime pas trop la façon dont tu nommes les noms de tes méthodes (monSubmit(), stopChamp()), il faut que ça soit à la fois parlant...

betaWeb, il y a 9 ans
var $form = $('form'); $form.on('submit', function (e) { e.preventDefault(); var $submitBtn = $('[type="submit"]', $form), oldValue = $submitBtn.val(); // On stocke la valeur initiale du bouton $submitBtn .val('Envoi en cours...') // On remplace la valeur du bouton .attr('disabled', 'disabled'); // On désactive le bouton pour éviter les submits intempestifs /* Ton traitement ici */ $submitBtn removeAttr('disabled') // On réactive le bouton .val(oldValue); // On réinjecte la valeur initiale du bouton return false; });
PhiSyX, il y a 9 ans

var $submitBtn = $('[type="submit"]', this) * (car sinon s'il y a plusieurs formulaires, tous seront executés en meme temps... :c)

betaWeb, il y a 9 ans

@PhiSyX C'est un script générique que j'ai fait, à lui de l'adapter selon ses besoin ;)

muss, il y a 9 ans

Salut KIv,

J'ai essayé ton bout de code mais pas de changement ! Merci

Kiv, il y a 9 ans

En es-tu certains !?
Erreur dans les logs ? que ce passe-t'il réellement ?
Car chez moi les vérifs des champs fonctionnes avec les messages d'erreurs qui s'affichent.
Puis lorsque tout est correcte le bouton change d'état.
Puis à toi de procéder en ajax pour la suite.