Boite de confirmation d'envoi d'un formulaire de contact

Bonjour,

j'essaie désespérément de trouver le code JavaScript pour afficher une boite d'information (alert) de confirmation lorsque le formulaire a bien été envoyé.

Je précise que mon hébergeur "Orange pages perso", ne supporte pas le PHP !

J'ai :

Code:

---

1 2 3 4

<form method="post" action="https://pages.perso.orange.fr/formulaire" onSubmit="return verifFormulaire( this )" > ... <button type="submit" name ="submit_btn" value="Envoyer">Envoyer</button> <button type="reset" value="Effacer">Effacer</button>

---

Comment tester la variable "Post" (true/false) en JS ? j'ai essayé ceci :

Code:

---

1 2 3 4 5 6

<script language="javascript" > if($post==1) { alert("Message envoyé !"); } </script>

---

En PHP, ça donne ceci :

Code:

---

1 2 3 4 5 6 7 8 9 10

"Avant d'envoyer le mail tu vérifies que $_POST n'est pas vide. Si il n'est pas vide, c'est qu'on a bien cliqué sur ton bouton. " <?php if (isset($_POST['submit'])) { #TRAITEMENT DE TON FORMULAIRE VALIDE $alerte = "Votre message a bien été envoyé";   #TRAITEMENT DE TON FORMULAIRE NON VALIDE $alerte = "Echec de l'envoi"; }

---

Ça parait simple mais c'est un vrai casse-tête ! et je n'ai rien trouvé de concluant sur le net.

D'avance, merci,

Daniel

POST est une notion côté serveur. Si tu n’as pas PHP, tu ne peux pas manipuler les données POST.
Pour contourner ce problème, le plus simple est de passer le formulaire en GET, et dans la page cible (celle de l’attribut action), tu mets un script qui examine la valeur location.search.

Mais je devine que tu cherches à aller plus loin qu’un simple message de confirmation, et malheureusement, sans PHP ou autre techno de programmation côté serveur, tu ne pourras pas faire grand chose : pas de base de données, pas de système de session, etc.

Cela dit, il y a des systèmes de stockage de données côté client (voir localStorage). Explique-nous plus en détail ce que tu cherches à faire, et on trouvera peut-être une solution qui te convient :)

Merci pour ta réponse,

Personnellement, j'aurais préféré un bout de code... car je débute en javaScript et je ne suis pas ur d'être en mesure d'exploiter correctement ta réponse

Citation:

---

Envoyé par Watilin

Mais je devine que tu cherches à aller plus loin qu’un simple message de confirmation, et malheureusement, sans PHP ou autre techno de programmation côté serveur, tu ne pourras pas faire grand chose : pas de base de données, pas de système de session, etc.

---

Je précise que je ne cherche pas a aller plus loin. Juste afficher une boite de dialogue de confirmation d'envoi. C'est tout!

Merci,

Dans ce cas… :)
Voilà comment je vois la chose : ton formulaire est en GET, et il a un paramètre (en plus des autres) qui sert juste à la page suivante à savoir que le formulaire a été soumis. On peut faire ça avec n’importe quel input, mais comme l’utilisateur ou l’utilisatrice n’a pas besoin de connaître ce paramètre, le type "hidden" me semble approprié.

Code:

---

1 2 3 4

<form method="get" action="https://pages.perso.orange.fr/formulaire"> <input type="hidden" name="ok" value="1" /> ... </form>

---

Il n’y a plus d’attribut onSubmit car tout le script s’exécute dans la page suivante.

La page suivante (celle se trouvant à l’URL /formulaire) comportera donc ce script :

Code:

---

1 2 3 4 5 6 7 8

<script> "use strict"; // voir https://developer.mozilla.org/fr/docs/Web/JavaScript/Reference/Strict_mode   if (location.search.includes("ok")) {   alert("Message envoyé !"); }   </script>

---

J’utilise .includes() qui est une méthode des chaînes de caractères (string), et qui comme son nom l’indique permet de tester si elle contient la valeur donnée ou non. Ici, je teste si location.search contient la valeur "ok".
Comme tu le vois, ça dépend de ce qu’on a mis dans le code du formulaire, et on n’a même pas besoin de la value="1".

Pour rentrer un peu dans les détails, la chaîne location.search a une forme un peu « compacte » qui n’est pas forcément pratique. Ça ressemble à ?param1=value1&param2=value2… et les caractères spéciaux sont encodés avec % (par exemple ">" devient "%3E"). Dans les scénarios plus compliqués, on doit faire de la manipulation de chaîne avec des méthodes comme .split() ou .slice(), ou alors utiliser une expression régulière. Et derrière, il faut encore décoder avec decodeURIComponent(). Tout ça est fastidieux.

Ou alors, il y a une propriété searchParams qui fait tout le boulot à notre place… Sauf qu’elle n’est pas présente sur location ! Il faut donc ruser et « envelopper » location dans un objet URL :

Code:

---

1 2 3 4

const params = new URL(location).searchParams; if (params.has("ok")) { alert("Message envoyé !"); }

---

Pourquoi là ça s’appelle .has() et pas .includes() ? Parce que… Heu… Parce que…

Bref, c’est pas toujours complètement évident mais il y a moyen d’arriver à ce qu’on veut ;)