Success message

Par Valentin BRETEL, il y a 8 ans

Javascript

Bonjour,
Je cherche à faire un message de succès qui s'exécuterait quand mon action avec mon bouton aura été exécuter, si vous avez une version simple avec un temps d'affichage limité pour le message, je serai preneur.
Merci d'avance !

3 réponses

antho07, il y a 8 ans

Bonjour,

T'aider à faire quelque chose oui, te le faire non.

Qu'as-tu essayé de faire? Où es-tu bloqué?

cordialement

Antho

Valentin BRETEL, il y a 8 ans

Bonjour,

Là j'ai trouvé comment afficher mon message de succès mais je voudrais qu'il dure pas longtemps, au lieu de resté sur la page actuellement.

Voilà mon fichier JS

$(document).ready( function() { function envoiInfo(){ $.ajax({ type: 'POST', url: '../php/contact.php', data: $(".generic-form").serialize(), success: function (response) { } }); } $("#contactMe").click( function () { envoiInfo(); //alert("Vos informations ont bien été envoyées"); $( "#success" ).show( "slow" ); }); });

et mon fichier PHTML

<section> <p class="alert alert-success hidden" id="success">Vos informations ont bien été envoyées.</p> <form class="generic-form"> <fieldset> <legend><i class="fa fa-book"></i> Informations </legend> <ul> <li> <label>Nom :</label> <input type="text" id="lastName" name="lastName" placeholder="Nom"> </li> <li> <label>Prénom :</label> <input type="text" id="firstName" name="firstName" placeholder="Prénom"> </li> <li> <label>Entreprise :</label> <input type="text" id="entreprise" name="entreprise" placeholder="Entreprise"> </li> <li> <label>Ville :</label> <input type="text" id="city" name="city" placeholder="Ville"> </li> <li> <label>Code postal :</label> <input type="text" id="zipcode" name="zipcode" maxlength="5" placeholder="Code postal"> </li> <li> <label>E-mail :</label> <input type="text" id="email" name="email" type="text" placeholder="E-mail"> </li> </ul> </fieldset> <fieldset> <legend><i class="fa fa-book"></i> Message </legend> <ul> <li> <input type="textarea" id="message" name ="message" placeholder="Message"> </li> <li id="modalHere"> <!-- Button trigger modal --> <button type="button" class="btn btn-success" data-toggle="modal" data-target="#exampleModalCenter"> Envoyer </button> <a class="btn btn-danger" href="<?= HOME_SRC ?>/index.php">Annuler</a> <!-- Modal --> <div class="modal fade" id="exampleModalCenter" tabindex="-1" role="dialog" aria-labelledby="exampleModalCenterTitle" aria-hidden="true"> <div class="modal-dialog modal-dialog-centered" role="document"> <div class="modal-content"> <div class="modal-header"> <h3 class="modal-title" id="exampleModalLongTitle">Sécurité</h3> <button type="button" class="close" data-dismiss="modal" aria-label="Close"> <span aria-hidden="true">&times;</span> </button> </div> <div class="modal-body"> <p>Les informations saisies ne sont pas sécurisées. En cliquant sur envoyer, vous certifiez avoir pris connaissance de cette information.</p> </div> <div class="modal-footer"> <button type="button" id="contactMe" class="btn btn-success" data-dismiss="modal">Envoyer</button> <button type="button" class="btn btn-danger" data-dismiss="modal">Annuler</button> </div> </div> </div> </div> </li> </ul> </fieldset> </form> </section>
antho07, il y a 8 ans

Ton code n'est pas bon.
Dans le cas où l'envoi ne s'effectue pas, le message va quand même s'afficher.

Fait l'essai en mettant une url pourrie, tu verras.

Pour la temporisation, je te conseille de regarder la méthode setTimeout native en javascript.