Formulaire bouton "Envoyer" qui n'envoie pas

**Drone** · 10/01/2010, 18h12

Bonjour je créé un petit code demandant dans un formulaire : un titre, une couleur, et un nombre,

Code :

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

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
 
<html xmlns="http://www.w3.org/1999/xhtml">
				<head>
				<meta http-equiv="Content-Type" content="text/html; charset=ISO-8859-1" />
				<title>Formulaire n°1 de test de BDD</title>
				</head>
				<body>
				<form action="http://localhost/creation_web.php" method="get">
				<p>
				Création de site Web <br/>
				Entrez le titre de votre site web <input type="text" name="titre_site_web" size="20"/> <br />
				Choisissez une couleur d'arrière plan<input type="text" name="color_arPlan" size="10"/><br/>
				Combien voulez vous de menu ? (le nombre maximal est 5)<input type="text" name="nombre_menu" size="2" /> <br />
				<input type="submit" value="Envoyer"/>
				<input type="reset" value="Annuler"/>
				</p>
				</form>
				</body>
				</html>

Ensuite un submit portant sur une page php avec des boucles if de manières à que si une case du formulaire n'est pas renseigné, l'erreur est annoncé et on doit tout réécrire.. (j'aurais préféré faire en sorte qu'on doive réécrire juste l'information manquante mais bon je ne trouve pas comment faire)

Code :

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

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
 
<?php
if (isset($_REQUEST['titre_site_web']) and $_REQUEST['titre_site_web']!='')
	{
	if (array_key_exists('color_arPlan',$_REQUEST)and $_REQUEST['color_arPlan']!='')
 
		{
			if (array_key_exists('nombre_menu',$_REQUEST) and $_REQUEST['nombre_menu']!='' and $_REQUEST['nombre_menu']>0 and $_REQUEST['nombre_menu']<6)
				{
				//@mysql_connect("localhost", "Identifiant", "motdepasse")or die('impossible de se connecter');
				//@mysql_select_db("test")or die('impossible de se connecter a la base de donnee');
				$nombremenu = 1;
 
				//entrer les titres des menus ci-dessous
				echo '
				<html xmlns="http://www.w3.org/1999/xhtml">
				<head>
				<meta http-equiv="Content-Type" content="text/html; charset=ISO-8859-1" />
				<title>Formulaire n°1 de test de BDD</title>
				<script type="text/javascript">
				function envoi(form)
				{
					if (form.nom.value = "")
					{
						alert ("Saisissez le titre du menu");
						form.nom.focus();
					}
					else 
					form.submit()
					;
				}
				</script>
				</head>
				<body>
				<form action="http://localhost/creation_web.php" method="post">';
					while ($nombremenu - 1< $_REQUEST['nombre_menu'])
					{	echo '<p>
					Entrer le titre du menu n°'.$nombremenu.'
					<input type="text" id="'.$nombremenu.'" name="titre_menu_'.$nombremenu.'" size="20"/>
					</p>
					<p>
					<input type="button" name="monBoutonEnvoyer" value="Envoyer" onclick="envoi(this.form)">
					</p>
					';
					$nombremenu++;
					}
				echo '
					</form>
				</body>
					</html>';
				}
 
			else 
			{	echo 'Attention erreur, vous avez mal ou pas renseigné le nombre de menu (maximum 5), veuillez de nouveau renseignez vos choix';
				echo '<form action="http://localhost/creation_web.php" method="post">
					<p>
					Création de site Web <br/>
					Entrez le titre de votre site web <input type="text" name="titre_site_web" size="20"/> <br />
					Choisissez une couleur d\'arrière plan<input type="text" name="color_arPlan" size="10"/><br/>
					Combien voulez vous de menu ?<input type="text" name="nombre_menu" size="2" /> <br />
					<input type="submit" value="Envoyer"/>
					<input type="reset" value="Annuler"/>
					</p>
					</form>';
			}
		}
		else
		{	echo 'Attention erreur, vous avez oublié d\'entrez la couleur de fond, veuillez de nouveau renseignez vos choix';	
			echo '<form action="http://localhost/creation_web.php" method="post">
					<p>
					Création de site Web <br/>
					Entrez le titre de votre site web <input type="text" name="titre_site_web" size="20"/> <br />
					Choisissez une couleur d\'arrière plan<input type="text" name="color_arPlan" size="10"/><br/>
					Combien voulez vous de menu ?<input type="text" name="nombre_menu" size="2" /> <br />
					<input type="submit" value="Envoyer"/>
					<input type="reset" value="Annuler"/>
					</p>
					</form>';
			}
	}
	else
	{	echo 'Attention erreur, vous avez oublié d\'entrer le titre de la page Web, veuillez de nouveau renseignez vos choix';	
		echo '<html xmlns="http://www.w3.org/1999/xhtml">
				<head>
				<meta http-equiv="Content-Type" content="text/html; charset=ISO-8859-1" />
				<title>Formulaire n°1 de test de BDD</title>
				</head>
				<body>
				<form action="http://localhost/creation_web.php" method="post">
				<p>
				Création de site Web <br/>
				Entrez le titre de votre site web <input type="text" name="titre_site_web" size="20"/> <br />
				Choisissez une couleur d\'arrière plan<input type="text" name="color_arPlan" size="10"/><br/>
				Combien voulez vous de menu ?<input type="text" name="nombre_menu" size="2" /> <br />
				<input type="submit" value="Envoyer"/>
				<input type="reset" value="Annuler"/>
				</p>
				</form>
				</body>
				</html>';
	}		
?>

Mon problème se pose pour la suite, dans un second formulaire qui se lance si tout les boucles sont bouclées, je demande dans une condition while un titre pour chaque menu (voir en dessous du commentaire //entrer les titres du menu ci-dessous)

Là j'ai donc mon code javascript que j'essaie d'utiliser pour obliger donc à remplir ce second formulaire demandant qu'on écrive un titre à chaque menu :

Code :

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

1
2
3
4
5
6
7
8
9
10
 
function envoi(form)
				{
					if (form.nom.value = "")
					{
						alert ("Saisissez le titre du menu");
						form.nom.focus();
					}
					else 
					form.submit()

Le problème étant que j'ai beau appuyer sur mon bouton créé "Envoyer" il ne se passe rien, je ne comprend pas pourquoi..
Je voudrais en fait pouvoir valider sans quitter la page php, le but est que j'écrive ensuite un code sql pour enregistrer dans une bdd
-le titre
-la couleur
-le nombre de menu
-chaque titre de menu

Et en cas je pensais rajouter sur le premier formulaire une demande de login qui servirait de clé primaire pour retrouver par la suite toute ces informations.

Ca peut vous paraitre confus, je débute dans le domaine donc j'essaie de me débrouiller mais je vois bien que c'est assez maladroit, si vous avez des questions je répondrais au mieux, merci de m'aider à résoudre mon problème javascript et si vous avez des suggestions pour l'ensemble du code je suis aussi preneur.

Merci encore.

**gwyohm** · 11/01/2010, 09h51

Salut,

Si j'ai bien compris, c'est le 2ème formulairre qui pose problème ?
Peux tu nous envoyer le source généré (clique droit / voir la source) ?

**Drone** · 11/01/2010, 16h24

Bonjour, voilà c'est le second formulaire qui ne fonctionne pas, voici le code source de la page générée :

Code :

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

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
 
				<html xmlns="http://www.w3.org/1999/xhtml">
				<head>
				<meta http-equiv="Content-Type" content="text/html; charset=ISO-8859-1" />
				<title>Formulaire n°1 de test de BDD</title>
				<script type="text/javascript">
				function envoi(form)
				{
					if (form.nom.value = "")
					{
						alert ("Saisissez le titre du menu");
						form.nom.focus();
					}
					else 
					form.submit()
					;
				}
				</script>
				</head>
				<body>
 
				<form action="http://localhost/creation_web.php" method="post"><p>
					Entrer le titre du menu n°1
					<input type="text" id="1" name="titre_menu_1" size="20"/>
					</p>
					<p>
					<input type="button" name="monBoutonEnvoyer" value="Envoyer" onClick="envoi(this.form);">
					</p>
					<p>
					Entrer le titre du menu n°2
					<input type="text" id="2" name="titre_menu_2" size="20"/>
 
					</p>
					<p>
					<input type="button" name="monBoutonEnvoyer" value="Envoyer" onClick="envoi(this.form);">
					</p>
 
					</form>
				</body>
					</html>

au début j'avais mis le input après le while de façon à avoir un seul bouton pour tout le formulaire, enfin voilà quand j'écris rien, il n'y a pas le message d'alert : alert ("Saisissez le titre du menu") qui apparait..

**SpaceFrog** · 11/01/2010, 16h57

il n'a pas de bouton submit ?

**Drone** · 11/01/2010, 17h12

Euh en fait j'ai essayé de faire en sorte qu'il appel la fonction envoi, et à la fin de cette fonction il y a un form.submit si la condition est fausse, c'est à dire que si form.nom.value != "" alors il y a un form.submit, mais la syntaxe doit être mauvaise ? j'ai trouvé celle là dans un bouquin pourtant.

J'me dis que c'est l'appel à la fonction qui n'est peut être pas correct ?

**vermine** · 12/01/2010, 07h57

Bonjour,

Je vois deux petites choses qui ne règleront peut-être pas votre problème mais qu'il vaut mieux corriger pour l'une, et qu'il faut corriger pour l'autre:

Code :

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

1
2
3
4
function envoi(form)
{
     if (form.nom.value = "")

- form n'est a priori pas un mot réservé mais presque. Ici, il est possible que ça gêne. On peut passer le nom d'un formulaire en paramètre mais alors on il est préférable de l'utiliser avec une autre syntaxe comme:

Code :

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

1
2
 
document.forms[maVariable];

Il y a une troisième syntaxe, mais voila qu'elle m'échape. Bref, quoiqu'il en soit, il est préférable de ne pas employer de nom de variable qui ressemble à des éléments de la page tels que: document, form, submit, ...

- Il faut deux égales (==) pour faire une comparaison.

Le troisième point, et non le moindre, est cet élément "nom" que je ne retrouve pas dans votre formulaire:

Code :

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

1
2
3
form.nom.value
form.nom.focus();

**E.Bzz** · 12/01/2010, 09h36

Bonjour,

Envoyé par vermine

- form n'est a priori pas un mot réservé

Si si

(ex : this.form)
... à modifier effectivement, donc.

Envoyé par vermine

- Il faut deux égales (==) pour faire une comparaison.

Le troisième point, et non le moindre, est cet élément "nom" que je ne retrouve pas dans votre formulaire

+1 ... pour les 2.

A+

**Drone** · 12/01/2010, 16h37

Bonjour,
Oula ouais pour les deux égales, c'est à force de modification que j'en ai réécris qu'un je suis trop tête en l'air,... bon alors voilà ma dernière version, je pense qu'il y a un mieux mais je n'ai toujours rien lorsque j'appuie sur le bouton "monBoutonEnvoyer"

Voici le code javascript :

Code :

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

1
2
3
4
5
6
7
8
9
10
11
12
13
 
<script type="text/javascript">
				function envoi(formulaire)
				{
					if (document.forms[formulaire].titre_menu.value == "")
					{
						alert ("Saisissez le titre du menu");
						document.forms[formulaire].focus();
					}
					else 
					document.forms[formulaire].submit();
				}
				</script>

Et voilà le code php :

Code :

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

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
 
<form action="http://localhost/creation_web.php" method="post">';
					while ($nombremenu - 1< $_REQUEST['nombre_menu'])
					{	echo '<p>
					Entrer le titre du menu n°'.$nombremenu.'
					<input type="text" id="'.$nombremenu.'" name="titre_menu" size="20"/>
					</p>
					<p>
					<input type="button" name="monBoutonEnvoyer" value="Envoyer" onClick="envoi(this.form);">
					</p>
					';
					$nombremenu++;
					}
				echo '
					</form>

Merci en tout cas pour vos commentaires qui m'aide bien.

**SpaceFrog** · 12/01/2010, 16h49

en paramètre tu passe le formulaire, pas son name =>

Code :

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

if (formulaire.titre_menu.value == "")

et

Code :

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

formulaire.submit()

**Drone** · 12/01/2010, 17h10

Alors grâce à vous, le bouton envoyer s'exécute seulement la condition n'est pas prise en compte car même lorsque j'écris rien dans le formulaire, le submit après la boucle s'exécute et je n'ai pas le message d'erreur donc je me dit que cette syntaxe est mauvaise :

Code :

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

if (formulaire.titre_menu.value == "")

J'ai donc écrite celle-ci pour voir si ca venait bien de là :

Code :

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

if (formulaire.titre_menu.value != "")

Et dans ce cas là quand j'écris rien j'ai le message d'erreur cela signifie donc que mon champ vide est différent de "", donc à votre avis que pourrais je écrire à la place de la syntaxe "" pour tester un champs vide ?

J'ai bien essayer la condition

Code :

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

if (formulaire.titre_menu.value == NULL)

Mais elle ne fonctionne pas non plus.

En tout cas mon problème ne vient plus que de là merci de m'avoir fait avancer.

**E.Bzz** · 12/01/2010, 17h13

C'est dans le <form> qu'il faut appeler ta fonction

Code :

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

<form ... onsubmit="return envoi(this);">

Il faut modifier la fonction pour qu'elle renvoie false quand le test est KO et remplacer

Code :

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

document.forms[formulaire].submit();

par

Code :

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

return true;

EDIT : il faut aussi modifier ton bouton en type="submit"

A+

**SpaceFrog** · 12/01/2010, 17h19

Voir les bases de la verification des formulaires dans les contributions js
http://www.developpez.net/forums/d55...aire+spacefrog

**Drone** · 12/01/2010, 18h37

Re,

Alors merci pour vos explications.

Cependant je ne comprend pas bien, le pépin vient du fait que le formulaire.titre_menu.value n'est pas égale à ' ' alors qu'il n'a pas de contenu.

Donc que je mette un message d'alert ou que j'indente une variable AllIsOk, le problème est que je ne rentre pas dans la boucle car

Code :

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

formulaire.titre_menu.value == \'\'

ne renvois jamais true.

Mon bouton du formulaire fait bien appel à la fonction, j'ai tout de même testé vos codes pour vérifier, et en faisant comme ceci:

Code :

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

1
2
 
<form action="javascript:alert(\'ok tout est bon ! Envoyé\')" onsubmit="return envoi()">';

Code :

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

1
2
3
4
5
6
7
8
9
10
 
	function envoi(formulaire)
				{
					if (formulaire.titre_menu.value == \'\')
					{
						return false;
					}
					else 
					return true;
				}

J'ai le message ok tout est bon.

Donc le problème je sais pas pourquoi vient de cette syntaxe :

Code :

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

formulaire.titre_menu.value == \'\'

Je suis obligé de mettre des underslash devant les apostrophes car je suis dans un echo, cela peut-il poser problème ?

Merci encore

**SpaceFrog** · 12/01/2010, 18h48

fais plutot l'inverse, utilse les ' pour php et les " pour les attributs html et le code js tu y verras plus clair

montre nous le code html généré ...
après ça relève plus d'un souci de sytaxe php que de js ...

**Drone** · 13/01/2010, 09h22

Bonjour,
Alors j'avais beau piquer un code d'un tutoriel j'avais le même soucis qu'avec mes anciens codes, à savoir que
mon champs titre n'étais soi disant jamais égal à ""

Mais j'ai finalement trouvé, mon problème viendrait du fait que la condition while créé des doublons, et que du coup mon champ titre même vide à comme value &titre c'est à dire le name du champs titre suivant..

Donc maintenant que j'ai changé ca je me retrouve avec un name qui varie, c'est à dire qu'il peut s'appeler titre1, titre2....
J'ai donc mis dans la fonction javascript un compteur que je concatène au nom de la variable : document.formulaire.titre, pour avoir document.formulaire.titre1, document.formulaire.titre2..., mais plus rien ne fonctionne à nouveau

Voilà le code html généré :

Code :

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

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
 
				<html xmlns="http://www.w3.org/1999/xhtml">
				<head>
				<meta http-equiv="Content-Type" content="text/html; charset=ISO-8859-1" />
				<title>Formulaire n°1 de test de BDD</title>			
				<script type="text/javascript">
//<![CDATA[
 
function valider(){
for (var compteur=0;compteur<6;compteur++)
  {
 var name = "document.formulaire.titre" +compteur +".value"; 
    // si la valeur du champ titre est non vide
  if(name != "") {
    // les données sont ok, on peut envoyer le formulaire    
    alert("ok");
	return true;
  }
  else {
    // sinon on affiche un message
    alert("Saisissez le titre");
    // et on indique de ne pas envoyer le formulaire
    return false;
  }
  }
}
 
//]]>
</script>
 
				</head>
 
				<body>
				<form action="http://localhost/creation_web.php" onsubmit="return valider()"
  method="get" name="formulaire"><p>
					Entrer le titre du menu n°1
					<input type="text" id="1" name="titre1" size="20"/>
					</p>
					<p>
					<input type="submit" value="Envoyer">
					</p>
					<p>
 
					Entrer le titre du menu n°2
					<input type="text" id="2" name="titre2" size="20"/>
					</p>
					<p>
					<input type="submit" value="Envoyer">
					</p>
 
					</form>
				</body>
					</html>

Alors là je pense que la variable name = "document.formulaire.titre" +compteur +".value" est un peu bidon parce que du coup dans cette variable ca devient une chaine de caractère et je peux pas m'en servir dans le if qui suis non ?

J'ai à l'initial tester de passer par le id comme ça j'me suis dit que je pourrais aussi tester son existence :

Code :

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

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
 
function valider(){
var compteur=0;
var identifiant = document.getElementById("compteur");
for (var compteur=0;compteur<6;compteur++)
  {
//si le id existe je rentre dans la boucle
if (identifiant)
{    // si la valeur du champ titre est non vide
  if(identifiant.titre.value != "") {
    // les données sont ok, on peut envoyer le formulaire    
    alert("ok");
	return true;
  }
  else {
    // sinon on affiche un message
    alert("Saisissez le titre");
    // et on indique de ne pas envoyer le formulaire
    return false;
  }
}
}
}

Mais apparemment document.getElementById(id).titre.value ça n'existe pas

Donc voilou, je me dis que je vais peut être laisser tomber ce while en php et faire autrement

**vermine** · 13/01/2010, 09h29

Dites donc, n'allez pas trop vite en besogne.

Code :

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

1
2
3
4
5
6
7
8
9
10
11
12
13
14
 
var name = "document.formulaire.titre" +compteur; 
//name est un mauvais nom de variable, changez-le.
//Vous créer une chaine de caractères au lieu de récupérer un objet.
var monChamp = "titre" + compteur ;
var maVar = document.formulaire.monChamp;
 
if(name.value != "") {
//On fait un value sur un objet, pas sur une chaine de caractères et encore moins sur un mot sûrement réservé
 
 
 
(identifiant.titre.value != "") {
//Pareil, objet.value, or identifiant est l'objet

**SpaceFrog** · 13/01/2010, 09h32

Code :

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

id="2"

...
il est deconseillé d'avoir des id uniquement numériques ...

**E.Bzz** · 13/01/2010, 09h50

Envoyé par Drone

j'ai tout de même testé vos codes pour vérifier,

Ben oui, mais avec le paramètre dans l'appel de la fonction, ça aurait donné quoi ?

Sinon, pour tes tes solutions actuelles, utilise plutôt la syntaxe

Code :

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

document.forms['name_du_form'].elements['name_element']

C'est quand même plus pratique pour les names dynamiques ... et surtout c'est une syntaxe valide ....

A+

**Drone** · 13/01/2010, 10h48

Re, merci pour vos commentaire, pour E.Bzz j'avais vu et je l'ai mis en edit pour l'histoire des variables en caractère mais j'avais pas pensé à ta solution,
entre temps j'ai commencé à vous écrire plein de message d'erreur mais jai tout résolu, donc voilà ma solution :
C'est le code html généré :

Code :

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

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
 
 
				<html xmlns="http://www.w3.org/1999/xhtml">
				<head>
				<meta http-equiv="Content-Type" content="text/html; charset=ISO-8859-1" />
				<title>Formulaire n°1 de test de BDD</title>			
				<script type="text/javascript">
//<![CDATA[
 
function valider(){
 
for (var compteur=1;compteur<6;compteur++)
  {
  var titrevar="titre"+compteur;
  var laVar = document.forms["formulaire"].elements[titrevar];
      // si la valeur du champ titre est non vide
  if(laVar.value != "") {
  //verification quon rentre bien dans la boucle
  alert(titrevar);
    // les données sont ok, on peut envoyer le formulaire    
    alert("ok");
 
  }
  else {
    // sinon on affiche un message
    alert("Saisissez le titre");
    // et on indique de ne pas envoyer le formulaire
    return false;
  }
   }
   return true;
}
 
//]]>
</script>
 
				</head>
				<body>
 
				<form action="http://localhost/creation_web.php" onsubmit="return valider()"
  method="get" name="formulaire"><p>
					Entrer le titre du menu n°1
					<input type="text" id="1" name="titre1" size="20"/>
					</p>
					<p>
					<input type="submit" value="Envoyer">
					</p>
					<p>
					Entrer le titre du menu n°2
					<input type="text" id="2" name="titre2" size="20"/>
 
					</p>
					<p>
					<input type="submit" value="Envoyer">
					</p>
					<p>
					Entrer le titre du menu n°3
					<input type="text" id="3" name="titre3" size="20"/>
					</p>
					<p>
 
					<input type="submit" value="Envoyer">
					</p>
 
					</form>
				</body>
					</html>

Maintenant je sais pas si j'utiliserais pas les id pour tester leur existence si ce n'est pas mieux, est ce que ma solution actuelle ne vous parait pas trop moche ?
En tout cas merci beaucoup pour vos commentaires, grâce à vous j'ai finalement réussi c'est beau