Discussion :

[actarus4444]

Bonjour à vous tous,

J'aimerai créer une page de type lightbox avec un message de remerciement et de confirmation lors de l'envoi d'un formulaire.

J'ai donc sur ma page mon formulaire envoyé par une action "formmail" et j'aimerai que lorsque l'utilisateur clic sur le bouton "envoyé" une lightbox apparaisse sur la même page et confirme son inscription, ceci en lieu et place de la page de redirection traditionnelle de remerciement (ex.: merci.html)...

Voilà, et merci d'avance pour votre aide.

[psylox]

Bonjour,

Il faut que tu places un écouteur d'évènement sur ton formulaire.

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
 
document.nameDuFormulaire.onsubmit=function() { ... };

Dans la fonction il faut que tu arrêtes la propagation de l'évènement (je te laisse chercher sur google), puis que tu appeles la fonction de lightbox qui fait apparaitre ta sur-div (fond grisé, avec l'affichage de merci.html par-dessus). Il faudra peut-être que tu ailles chercher le contenu de ton fichier merci.html par ajax pour l'afficher dans ta sur-div.
Cependant ton formulaire n'est pas validé, il faut donc que soit après un certain temps (setInterval) tu valides ton formulaire, soit que tu le fasses par ajax afin d'envoyer les données du formulaire au serveur.

[DiDieuh]

Sur l'évenement onSubmit, tu peux appeler la fonction qui va créé ta lightbox. Ensuite, en fonction de si l'utilisateur confirme ou pas, tu place un return true or false, qui bloquera ainsi l'envoie de ton formulaire.

Un petit exemple :

- Dans ton formulaire :

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
 
<form action="monfichier.php" onsubmit="return remerciement()">
<input type="submit" id="toto" value="Envoyer" />
</form>

- Ta fonction JS :

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
function remerciement (){
        //Tu déclenches le pop de ta lightbox, puis...
        //Puis en fonction du clic tu renvoies vrai ou faux
        return (confirm) ? true: false;
}

C'est un exemple pas très précis, mais c'est une piste du moyen que tu peux mettre en oeuvre