Discussion :

[eppo81]

Bonjour à tous,

J'ai le problème suivant :
- Dans une page html, j'ai crée un formulaire avec plusieurs champs input. la méthode d'envoi des données est POST. Au moment de valider, je lance une fonction javascipt qui effectue différentes vérification sur les champs du formulaire avant d'afficher la page de vérification "profil_verification.php".
- Dans cette page de vérification, je veux récupérer les valeurs des champs input. Pour cela j'utilise la fonction $_POST. Sauf que là, je ne récupère rien ! Les variables ne sont pas envoyé à la page profil_verification.php.

Voici la déclaration du formulaire :

Code html :

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

1
2
3
<form name="formulaire_inscription" action="javascript:validation_formulaire()" method="post">
<input name="" type="submit"><input name="" type="reset">
</form>

Voici la déclaration de la fonction validation_formulaire()" :

Code :

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

1
2
3
4
function validation_formulaire(){
	var valide=true;
	if (valide==true) {window.location.replace('profil_verification.php')};
}

J'ai fait un test en remplaçant dans le champ action du formulaire l'appelle à la fonction par le nom de la page profil_verification.php. Et là, je récupère bien mais variable.

Merci d'avance pour votre aide.

[Watilin]

Les variables ne sont pas envoyé à la page profil_verification.php.

C'est normal car tu utilises location.replace. Les variables ne sont envoyées que lorsque c'est le formulaire qui est soumis. Et, problème, tu as mis un bout de code JS dans l'attribut action, donc tu ne peux pas soumettre le formulaire.

La bonne façon de faire, c'est d'intercepter l'évènement submit du formulaire, et l'annuler si besoin.

Code HTML :

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

1
2
3
4
5
<form id="formulaire_inscription" action="profil_verification.php" method="POST">
   ...
   <input type="sumbit">
   <input type="reset">
</form>

Code :

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

1
2
3
4
5
6
7
8
9
function validation_formulaire(event) {
   var valide = true;
 
   if (valide === false) {
      event.preventDefault(); // annule la soumission
   }
}
 
document.getElementById("formulaire_inscription").addEventListener("submit", validation_formulaire);

[eppo81]

Merci Watilin pour ta réponse.

J'ai modifié mon code HTML pour rajouter la balise id :

Code html :

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

1
2
3
<form id="formulaire_inscription" action="profil_verification.php" method="POST">
    <input name="" type="submit"><input name="" type="reset">
</form>

Et j'ai copié dans mon fichier Javascipt ton code (en rajoutant deux alerts() ) :

Code :

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

1
2
3
4
5
6
7
8
9
function validation_formulaire(event) {
	var valide = true;
	alert("ok");
	if (valide == false) {
		alert("ko");
		event.preventDefault(); // annule la soumission
	}
}
document.getElementById("formulaire_inscription").addEventListener("submit",validation_formulaire);

Lors de l'appuis sur le bouton de validation du formulaire, la page profil_verification.php s'affiche bien mais la fonction de validation n'est pas appelé car aucune des deux alertes ne s'affiche.

[Watilin]

Je te conseille d'utiliser console.log à la place de alert. Les messages s'affichent successivement dans la console (F12) et tu n'as pas besoin de cliquer pour que le script continue.

As-tu bien utilisé addEventListener ?

[Bovino]

Et j'ai copié dans mon fichier Javascipt ton code

A quel endroit as-tu ajouté ce code ?
Parce que si tu le mets avant la balise du formulaire, ça risque pas de marcher puisque document.getElementById("formulaire_inscription") n'existe pas encore.

[iakou]

Bonjour.

Pourquoi faire simple quand on peut faire compliqué ?...

Code html :

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

<FORM method="POST" action="profil_verification.php" onsubmit="return validation_formulaire()">

Votre transaction profil_verification.php sera soumise SSI (si et seulement si) votre JS validation_formulaire retourne TRUE.

Quant à votre fonction JS de verification :

- Elle vérifie vos # inputs en séquence et retourne FALSE dès qu'une erreur de syntaxe est détectée.
- Elle retourne TRUE si il n'y a aucune erreur.

Less is more...

PS : Il serait utile de prévoir dans votre page une zone <span id="erreur_detectee"> qui afficherait l'erreur pour l'input concerné.

[SpaceFrog]

ça manque de return ...

http://www.developpez.net/forums/d55...on-formulaire/

[iakou]

Bonjour Space.

C'est bien vu !... Je viens de corriger à l'instant. Bonne journée.