Affichage champ de formulaire

**delphin2** · 09/07/2011, 20h45

Bonjour tout le monde tout d'abord,

Je suis en train de créer un formulaire d'inscription, tout est fait (regex...) sauf que j'ai envie d'afficher des champs de formulaires html avec javascript (alert). Le problème est que j'ai tout essayé : alert(champFormulaire) ou alert("champFormulaire") ou même les simples quotes... Bref pétage de boulons un petit quand même. Je dois faire quelque chose de mal à mon avis et c'est pour cela que j'en remets à vous.

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
script type="text/javascript"> 
function verification()
{
   var inputList =                                document.forms["formInscription"].elements;
   var alertTxt = "";
 
   var erreur = false;
 
   for (var i = 0; i <= inputList.length; i++)
   {
      alert('ca marche');
 
      if (inputList[i].type=="text" && inputList[i].value == "")
      {
	 alertTxt += 'Le champ ' + inputList[i].name + ' n\'a pas été rempli \n';
      }
      else erreur = true;
   }
 
   alert(alertTxt);
 
   return true;
}

Le alert de "ca marche" fonctionne donc on rentre bien dans la boucle. Le gros soucis est que je n'arrive pas à accéder aux champs du formulaire "formInscription" tout simplement.

Le formulaire :

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
 
<form id="formInscription" action="formsInscription.php" method="post" onSubmit="return verification()" >
 
   <fieldset>
	<legend><font color="#ff7300"> Vos coordonnées </font></legend> <!-- Titre du fieldset -->
 
	<br />
 
	<div style="background-color:beige">
	<label for="nom"><strong>Nom* :</strong></label><input type="text" name="nom" /> <br />
	<label for="prenom"><strong>Prénom* :</strong></label><input type="text" name="prenom" /><br />
	<label for="adresse"><strong>Adresse* :</strong></label><input type="text" name="adresse" /><br />
	<label for="codeP"><strong>Code postal* :</strong></label><input type="text" name="CP" /><br />
	<label for="ville"><strong>Ville* :</strong></label><input type="text" name="ville" /><br />
	<label for="pays"><strong>Pays* :</strong></label><input type="text" name="pays" /><br />
	<label for="email"><strong>Email* :</strong></label><input type="text" name="email" /><br /> <br />
 
	<strong>* Champs obligatoires</strong> <br /> <br />
 
	<input type="submit" value="Valider le formulaire d'inscription" /> <br /><br />
 
     </fieldset>
 
     <br />
 
</form>

Je vous remercie beaucoup d'avance pour votre aide

**Auteur** · 09/07/2011, 20h49

bonjour,

essaye en remplaçant

Code :

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

1
2
 
var inputList =  document.forms["formInscription"].elements;

par

Code :

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

1
2
 
var inputList =  document.getElementById("formInscription").getElementsByTagName("input");

**delphin2** · 09/07/2011, 20h54

Envoyé par Auteur

bonjour,

essaye en remplaçant

Code :

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

1
2
 
var inputList =  document.forms["formInscription"].elements;

par

Code :

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

1
2
 
var inputList =  document.getElementById("formInscription").getElementsByTagName("input");

Cela ne m'affiche que "ça marche" rien d'autre. A croire que l'alert à la fin n'est pas reconnu.

**delphin2** · 09/07/2011, 21h04

Même avec cela rien ne s'affiche

:

Code :

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

1
2
3
4
if(document.formInscription.nom.value=='')
{
   alert('Le champ NOM ne peut pas rester vide !');
}

**Auteur** · 09/07/2011, 21h06

en effet c'est curieux

Le test contenu dans la boucle fonctionne, j'ai tout vérifié. Il semblerait que le formulaire soit envoyé dès que la boucle se termine.

Personnellement je n'aime pas ce genre d'écriture

Code :

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

document.formInscription.nom.

je préfère utiliser l'attribut id que name

**delphin2** · 09/07/2011, 21h10

Envoyé par Auteur

en effet c'est curieux

Le test contenu dans la boucle fonctionne, j'ai tout vérifié. Il semblerait que le formulaire soit envoyé dès que la boucle se termine.

Tout à fait d'accord, la balle de fusil sera pour après quoique je n'ai pas d'arme chez moi mdr

Même avec ça rien ne s'affiche alors que c'était la solution d'un des forumeurs :

Code :

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

1
2
 
if (document.formInscription.nom) { alert('Le champ nom existe'); }

Le lien de l'autre post :

http://www.developpez.net/forums/d23...champs-existe/

**delphin2** · 09/07/2011, 21h15

Envoyé par Auteur

en effet c'est curieux

Le test contenu dans la boucle fonctionne, j'ai tout vérifié. Il semblerait que le formulaire soit envoyé dès que la boucle se termine.

Personnellement je n'aime pas ce genre d'écriture

Code :

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

document.formInscription.nom.

je préfère utiliser l'attribut id que name

Sans être curieux

, comment as-tu vérifié que la boucle fonctionnait?
Tu as réussi à afficher quelque chose suite au test if?

**Auteur** · 09/07/2011, 21h21

j'ai simplement remplacé ton alert("ça marche") par :

Code :

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

alert(inputList[i].type);

=> affiche bien "text"

Code :

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

alert(inputList[i].value);

=> affiche bien le contenu des input

Code :

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

alert(alertTxt);

=> on a bien un message

et pour vérifier si le test est vrai :

Code :

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

alert(inputList[i].type=="text" && inputList[i].value == "");

Pour le test je cliquais sur "envoyer" sans remplir le formulaire

J'ai placé ces alert() dans la boucle. Mais une fois sorti de la boucle plus rien

et la page se recharge.

**BByani** · 09/07/2011, 21h34

Simplement

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
<script type="text/javascript"> 
function verification()
{
	//on met les elements du formulaire dans une variable
	var inputList = document.forms["formInscription"].elements;
	//variable - gestion erreur -
	var alertTxt = "";
	var erreur = false;
	//boucle de parcourt du tableau inputList
	for (var i = 1; i < inputList.length-1; i++){
			if ((inputList[i].type=="text") && (inputList[i].value == ""))	{
				alertTxt += 'Le champ ' + inputList[i].name + ' n\'a pas été rempli \n';
			}else{
				erreur = true;
			}
	}
   alert(alertTxt);
   return true;
}
</script>

(fonctionnel)

**delphin2** · 09/07/2011, 21h37

Envoyé par Auteur

j'ai simplement remplacé ton alert("ça marche") par :

Code :

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

alert(inputList[i].type);

=> affiche bien "text"

Code :

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

alert(inputList[i].value);

=> affiche bien le contenu des input

Code :

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

alert(alertTxt);

=> on a bien un message

et pour vérifier si le test est vrai :

Code :

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

alert(inputList[i].type=="text" && inputList[i].value == "");

Pour le test je cliquais sur "envoyer" sans remplir le formulaire

J'ai placé ces alert() dans la boucle. Mais une fois sorti de la boucle plus rien

et la page se recharge.

J'ai testé aussi avec tous les alerts. Ca marche.
J'ai essayé le alert(alertTxt); à la sortie de la boucle for et il m'a affiché tous les messages qu'il fallait afficher donc à priori ça marche la concaténation des messages + variables + affichage en sortie de boucle.

Mais dès que je rentre un champ et que j'en laisse vide plus aucun message ne s'affiche là j'avoue ne pas comprendre. Par contre, dans la boucle tout s'affiche parfaitement les messages sont bien affichés

**NoSmoking** · 09/07/2011, 22h12

Bonjour,
- il faut récupérer l'objet FORM, ou en le passant à la fonction, avec this, ou via document.getElementById attendu qu'elle n'a pas de NAME
- il faut boucler de i= 0 à i < Tableau.length, les indices des tableaux, ici une nodeList, commençant à 0
- il faut retourner false si une erreur est détectée, si alertTxt est non vide donc

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
function verification() {
  // var inputList = document.forms["formInscription"].elements;
  // GET l'objet FORM par son ID, comme elle n'a pas de name
  var oForm = document.getElementById('formInscription');
  var inputList = oForm.elements;
  var nb =  inputList.length;
  var alertTxt  = "";
//  var erreur = false;
//  for (var i = 0; i <= inputList.length; i++) {
  for (var i = 0; i < nb; i++) {
//    alert('ca marche');
    if (inputList[i].type == "text" && inputList[i].value == "") {
      alertTxt += 'Le champ ' + inputList[i].name + ' n\'a pas été rempli \n';
    }
//    else{
//      erreur = true;
//    }
  }
  // ERREUR Dectecte on affiche
  if( alertTxt.length){
    alert(alertTxt);
    return false;
  }
  // pas de soucis on soumet
  return true;
}

**delphin2** · 09/07/2011, 22h22

Envoyé par NoSmoking

Bonjour,
- il faut récupérer l'objet FORM, ou en le passant à la fonction, avec this, ou via document.getElementById attendu qu'elle n'a pas de NAME
- il faut boucler de i= 0 à i < Tableau.length, les indices des tableaux, ici une nodeList, commençant à 0
- il faut retourner false si une erreur est détectée, si alertTxt est non vide donc

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
function verification() {
  // var inputList = document.forms["formInscription"].elements;
  // GET l'objet FORM par son ID, comme elle n'a pas de name
  var oForm = document.getElementById('formInscription');
  var inputList = oForm.elements;
  var nb =  inputList.length;
  var alertTxt  = "";
//  var erreur = false;
//  for (var i = 0; i <= inputList.length; i++) {
  for (var i = 0; i < nb; i++) {
//    alert('ca marche');
    if (inputList[i].type == "text" && inputList[i].value == "") {
      alertTxt += 'Le champ ' + inputList[i].name + ' n\'a pas été rempli \n';
    }
//    else{
//      erreur = true;
//    }
  }
  // ERREUR Dectecte on affiche
  if( alertTxt.length){
    alert(alertTxt);
    return false;
  }
  // pas de soucis on soumet
  return true;
}

Tout d'abord un grand respect car tout cela marche.

"Il faut récupérer l'objet FORM, ou en le passant à la fonction, avec this, ou via document.getElementById attendu qu'elle n'a pas de NAME"

Je n'ai pas bien compris cette partie. Tu veux dire que les champs dans la liste n'ont pas de NAME mais des ID c'est ça?

**NoSmoking** · 09/07/2011, 22h48

Je n'ai pas bien compris cette partie. Tu veux dire que les champs dans la liste n'ont pas de NAME mais des ID c'est ça?

NON uniquement pour ton formulaire n'ayant pas de NAME

Code :

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

<form id="formInscription" action="formsInscription.php" method="post" onSubmit="return verification()" >

seul IE, même si les autres reconnaissent document.forms["formInscription"], en absence de NAME va chercher si il y a une ID.

Tous tes INPUTs ont un NAME ce qui est préférable si tu veux les transmettre au serveur.

**Auteur** · 09/07/2011, 23h07

j'avoue ne pas avoir compris pourquoi

Code :

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

var inputList =  document.getElementById("formInscription").getElementsByTagName("input");

n'a rien donné

Ou c'est juste à cause de la boucle for qui ne commence pas à 0 ??
Qu'est-ce que j'ai raté ?

**NoSmoking** · 09/07/2011, 23h15

Code :

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

var inputList =  document.getElementById("formInscription").getElementsByTagName("input");

et

Code :

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

var inputList = document.forms["formInscription"].elements;

c'st la même chose...

l'ERREUR est ici

Code :

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

for (var i = 0; i <= inputList.length; i++) {

i arrive donc à valoir inputList.length et il n'y a pas d'élément inputList[inputList.length]

**delphin2** · 09/07/2011, 23h28

Envoyé par NoSmoking

NON uniquement pour ton formulaire n'ayant pas de NAME

Code :

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

<form id="formInscription" action="formsInscription.php" method="post" onSubmit="return verification()" >

seul IE, même si les autres reconnaissent document.forms["formInscription"], en absence de NAME va chercher si il y a une ID.

Tous tes INPUTs ont un NAME ce qui est préférable si tu veux les transmettre au serveur.

Ok je capte une inattention de ma part en plus par rapport à l'ID. Vraiment merci beaucoup à toi

**delphin2** · 09/07/2011, 23h29

Envoyé par NoSmoking

Code :

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

var inputList =  document.getElementById("formInscription").getElementsByTagName("input");

et

Code :

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

var inputList = document.forms["formInscription"].elements;

c'st la même chose...

l'ERREUR est ici

Code :

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

for (var i = 0; i <= inputList.length; i++) {

i arrive donc à valoir inputList.length et il n'y a pas d'élément inputList[inputList.length]

Qu'est ce que je suis bête (erreur de débutant pour ma part mon dieu mais ça saute aux yeux en plus

). Enfin le tout est de comprendre

**delphin2** · 09/07/2011, 23h32

Merci à toi aussi Auteur pour ton aide et BByani car tu m'as résolu le problème également avec ce que j'ai utilisé.

J'ai quand même pas mal appris du coup sur Javascript que je ne connais pas du tout pour être honnête

Et hop un petit résolu

Affichage champ de formulaire

JavaScript

Discussions similaires

Partager

Partager