verif champ input générés avec une boucle

**rudak** · 23/12/2009, 18h37

bonjour,
1) je génère des champs input en fonction d'un nombre donné
2) je voudrai vérifier que les champs soient remplis
-dans le cas contraire chager la couleur du champ et lancer une alert(remplir champ 1)
le soucis c'est que je ne sai pas coment selectioner mes input avec javascript

Après avoir passé 3 heures a essayer des trucs j'ai réussi a faire le code ci dessous mais je me doute que c'est tout a refaire meme si ca marche

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
<?php
$nbrepassagers= 3 ; // on défini ici la variable corespondant nombre de imput souhaités
 
for($i=0;$i<$nbrepassagers;$i++)
                {
                $nompassager=$_POST['nompassager[$i]'];
                
                echo "passager  $i : ".$nompassager.'<br />'; 
 
}
?>
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
<head>
<title>Document sans titre</title>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
 
<script language="JavaScript">
function couleur(obj) 
{
     obj.style.backgroundColor = "#ffffff"; //on s'assure que l'input ou on se trouve soit blanc
}
 
function check(thisform) 
{
	var msg = ""; // on défini la variable du message ==>  VIDE au début du check
	var nbpass = thisform.nbrepassagers.value; // on récupère le nombre de passagers sur un INPUT caché
	var inb=0; 
	while(inb < nbpass) // on vérifie chaques champs en faisant une boucle determinée par le nombre de passagers
	{
 
	var champ = thisform.nompassager(inb);
	if (thisform.nompassager(inb).value == "") // si le champ est vide
	{
		msg += 'Veuillez remplir le champ '+inb+'\n'; // on rempli la phrase d'erreur
		thisform.nompassager[inb].style.backgroundColor = "#F3C200"; // on colore le champ en question
 
	}
	inb++;
}
if (msg == "") // si le message d'erreur est vide cela veut dire qu'il ny a pas d'erreur
	{
		return(true); // on acepte le SUBMIT
	}
	else // si le message d'erreur est rempli 
	{
		alert(msg); // on déclenche l'alerte avec le message en question
		return(false); // on refuse le SUBMIT
	}
}
</script>
</head>
<body>
<form name="formulaire" id="formulaire" action="test_verifformvivi.php" method="post" enctype="multipart/form-data" onSubmit="return check(this)">
<?
 
 for($i=0;$i<$nbrepassagers;$i++)
	{
	echo'Passager n°'.$i;
	echo"<p><input type='text' onKeyUp='javascript:couleur(this);'   id='nompassager' name='nompassager'></p>\n";
	} 
?>
  <p>
    <input type="hidden" name="nbrepassagers" id="nbrepassagers" value='<?php echo $nbrepassagers; ?>'>
  </p>
  <p>
    <input name="envoyer" type="submit" value="Envoyer">
  </p>
</form>
</body>
</html>

**vermine** · 24/12/2009, 07h50

Bonjour,

Pour commencer, vous ne pouvez pas avoir deux fois le même id dans la page.

Or ici vous êtes dans une boucle:

Code :

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

1
2
echo"<p><input type='text' onKeyUp='javascript:couleur(this);'   id='nompassager' name='nompassager'></p>\n";

Je vous conseille donc de rajouter le compteur à l'id:

Code :

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

1
2
 
id='nompassager_" . i . "'

Pour récupérer les input de type text vous pouvez faire ainsi:

Code :

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

1
2
3
4
 
var tab_input = document.getElementByTagsName("INPUT");
if(tab_input[0].type == "text" && tab_input[0].name == "nompassager")
   ...

Sinon, vu que tous vos input passager ont le même name, il existe:

Code :

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

1
2
 
var tab_passagers = document.getElementsByName("nompassager");

verif champ input générés avec une boucle

JavaScript

Discussions similaires

Partager

Partager