Test d'un input text dynamique avec js

**alaska750** · 04/09/2009, 23h36

Bonsoir,
J'ai un problème avec le test d'un input text dynamique. En effet, dans le code ci-joint l'utilisateur peut à son grée ajouter ou pas des éléments AutreNo...le souci est que je n'arrive pas à trouver la bonne parade me permettant de vérifier que les champs (pouvant varier de 1 à 5) sont de type numérique... en gros j'aimerais pouvoir effectuer le même test que l'input type NoContenant (qui lui fonctionne), le champ de ce dernier devient jaune si la saisie n'est pas numérique (ex.: toto).
Qui a une idée sur comment contrer cette problématique ?
Je vous remercie d'avance pour votre aide.
A+

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
<html>
<head>
<title>Test de vérification de formulaire</title>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
</head>
 
<script language="javascript">
//<--
function couleur(obj) {
     obj.style.backgroundColor = "#FFFFFF";
}
 
function check() {
	var msg = "";
	if (document.form1.NoContenant.value != "")	{
		var valeur = document.form1.NoContenant.value;
		if(!(/^\d+$/.test(valeur))) {
			msg += "Veuillez saisir un numéro\n";
			document.form1.NoContenant.style.backgroundColor = "#F3C200";
		}
	}
	var AutreNo = document.getElementById('T_INSERT');
	var issue = 0;
	for (var i=0; i<AutreNo.rows.length; i++){
		alert(AutreNo.value);
		if(!(/^\d+$/.test(AutreNo.rows.value))){
			issue = 1;
		}
	}
	if (issue == 1) {
		msg += "Veuillez saisir un numéro\n";
	}
 
	if (msg == "") return(true);
	else	{
		alert(msg);
		return(false);
	}
}
 
var Compteur = 0;
function Delete_Ligne( obj_){
  var Parent;
  var Obj = obj_;
  if( Obj){
    do{							//-- tant que pas la balise <TR>
       Obj = Obj.parentNode;
    }while( Obj.tagName != "TR")
    Parent = Obj.parentNode;	//-- Recup du parent
    if( Parent){				//-- Suppression de la ligne
      Parent.deleteRow( Obj.rowIndex)
      --Compteur;
	}
  }
}
function Create_Ligne(){
	if (Compteur <5){		//-- compteur pour limiter le nb de champ texte à 5 max
  		var O_Table = document.getElementById('T_INSERT');	//-- Get objet tableau
  		var NbrLigne = O_Table.rows.length;	//-- Get nombre de ligne du tableau
  		var Pos = NbrLigne;					//-- Position d'insertion
  		O_Row  = O_Table.insertRow( Pos);		//-- Insertion d'une ligne
  		Compteur++;							//-- Insertion d'une cellule
  		O_Cell = O_Row.insertCell(0);			//-- Insertion d'une autre cellule
  		O_Cell.innerHTML = 'Autre N°:';
  		O_Cell = O_Row.insertCell(1);
  		O_Cell.innerHTML = '<input type="text" name="AutreNo[]" size="5" />';
  		O_Cell = O_Row.insertCell(2);
  		O_Cell.innerHTML = '<input type="button" value=" - " onClick="Delete_Ligne(this)">';
	}
}
//-->
</script>
<form action="page.html" method="post" enctype="application/x-www-form-urlencoded" name="form1"  onSubmit="return check();">
<table>
	<td>Numéro:
   <input type="text" name="NoContenant" size="4" onKeyUp="javascript:couleur(this);" /></td>
  	</tr>
 </table>
<table border="0">
<table id="T_INSERT">
<tr>
<td>Autre N°:</td>
<td><input type="text" name="AutreNo[]" size="5"/>
<td><input name="button" type="button" onClick="Create_Ligne()" value="  +  ">
</tr>
</table>
 <input type="submit" name="Submit" value="Envoyer">   
</form>
</body>
</html>

**emmanuel.remy** · 05/09/2009, 01h34

Salut,

Je crois que tu t'es un peu emmêlé les pinceaux dans tes numéros

Code :

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

1
2
3
4
5
6
7
8
for (var i=0; i<AutreNo.rows.length; i++){
  var numero = document.form1.elements["AutreNo[]"][i];
  alert(numero.value);
  if(!(/^\d+$/.test(numero.value))){
	issue = 1;
  }
}

ERE

**alaska750** · 07/09/2009, 00h27

Hello,

Euuuh en effet

, mais grâce à tes conseils mes pinceaux sont maintenant démêlés !

MERCI BEAUCOUP !

**alaska750** · 20/09/2009, 17h30

Bonjour,

Pour rappel, ce bout de code permet à un utilisateur d'ajouter 5 champs AutreNo (de type input type=text) avec un bouton + (et de retirer ces derniers avec un bouton -). Grâce à vos coups de main j'ai progresser dans le test de ces champs ...par contre je viens de constater un problème qui apparait lorsque l'utilisateur ne désirant pas ajouter des champs AutreNo supplémentaire introduit toto (par exemple) dans le seul champ disponible ... En gros, le test js ne s'effectue que quand AutreNo contient au moins 2 champs ?
Pourquoi ? et y a t'il une astuce pour contrer ce problème ?
Merci d'avance pour votre aide !(j'en ai besoin ..)

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
 
<html>
<head>
<title>Test de vérification de formulaire</title>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
</head>
 
<script language="javascript">
//<--
function couleur(obj) {
     obj.style.backgroundColor = "#FFFFFF";
}
 
function check() {
	var msg = "";
	if (document.form1.NoContenant.value != "")	{
		var valeur = document.form1.NoContenant.value;
		if(!(/^\d+$/.test(valeur))) {
			msg += "Veuillez saisir un numéro\n";
			document.form1.NoContenant.style.backgroundColor = "#F3C200";
		}
	}
	var AutreNo = document.getElementById('T_INSERT');
	var issue = 0;
	for (var i=0; i<AutreNo.rows.length; i++){
	  var numero = document.form1.elements["AutreNo[]"][i];
	  alert(numero.value);
	  if(!(/^\d+$/.test(numero.value))){
			document.form1["AutreNo[]"][i].style.backgroundColor = "#F3C200";
  		issue = 1;
  	}
	}
	if (issue == 1) {
		msg += "Veuillez saisir un numéro\n";
	}
 
	if (msg == "") return(true);
	else	{
		alert(msg);
		return(false);
	}
}
 
var Compteur = 0;
function Delete_Ligne( obj_){
  var Parent;
  var Obj = obj_;
  if( Obj){
    do{							//-- tant que pas la balise <TR>
       Obj = Obj.parentNode;
    }while( Obj.tagName != "TR")
    Parent = Obj.parentNode;	//-- Recup du parent
    if( Parent){				//-- Suppression de la ligne
      Parent.deleteRow( Obj.rowIndex)
      --Compteur;
	}
  }
}
function Create_Ligne(){
	if (Compteur <5){		//-- compteur pour limiter le nb de champ texte à 5 max
  		var O_Table = document.getElementById('T_INSERT');	//-- Get objet tableau
  		var NbrLigne = O_Table.rows.length;	//-- Get nombre de ligne du tableau
  		var Pos = NbrLigne;					//-- Position d'insertion
  		O_Row  = O_Table.insertRow( Pos);		//-- Insertion d'une ligne
  		Compteur++;							//-- Insertion d'une cellule
  		O_Cell = O_Row.insertCell(0);			//-- Insertion d'une autre cellule
  		O_Cell.innerHTML = 'Autre N°:';
  		O_Cell = O_Row.insertCell(1);
  		O_Cell.innerHTML = '<input type="text" name="AutreNo[]" size="5" />';
  		O_Cell = O_Row.insertCell(2);
  		O_Cell.innerHTML = '<input type="button" value=" - " onClick="Delete_Ligne(this)">';
	}
}
//-->
</script>
<form action="page.html" method="post" enctype="application/x-www-form-urlencoded" name="form1"  onSubmit="return check();">
<table>
	<td>Numéro:
   <input type="text" name="NoContenant" size="4" onKeyUp="javascript:couleur(this);" /></td>
  	</tr>
 </table>
<table border="0">
<table id="T_INSERT">
<tr>
<td>Autre N°:</td>
<td><input type="text" name="AutreNo[]" size="5"/>
<td><input name="button" type="button" onClick="Create_Ligne()" value="  +  ">
</tr>
</table>
 <input type="submit" name="Submit" value="Envoyer">   
</form>
</body>
</html>

**alaska750** · 21/09/2009, 23h43

Bonsoir,

Quelqu'un à une idée ?

Merci d'avance pour toute aide.

**emmanuel.remy** · 21/09/2009, 23h57

Salut,

Quelque chose comme:

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
<html>
<head>
<title>Test de vérification de formulaire</title>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
</head>
 
<script language="javascript">
//<--
function couleur(obj) {
     obj.style.backgroundColor = "#FFFFFF";
}
 
function check() {
	var msg = "";
	if (document.form1.NoContenant.value != "")	{
		var valeur = document.form1.NoContenant.value;
		if(!(/^\d+$/.test(valeur))) {
			msg += "Veuillez saisir un numéro\n";
			document.form1.NoContenant.style.backgroundColor = "#F3C200";
		}
	}
	var AutreNo = document.getElementById('T_INSERT');
	var testNumero = function(numero) {
  	  alert(numero.value);
  	  if(!(/^\d+$/.test(numero.value))){
  			numero.style.backgroundColor = "#F3C200";
        return 1;    		
    	}
    	return 0;
  }
	var issue = 0;
	if (AutreNo.rows.length>1)
  	for (var i=0; i<AutreNo.rows.length; i++){
  	 issue = testNumero(document.form1.elements["AutreNo[]"][i]);
  	 if (issue==1) break;
    }
  else {
  	 issue = testNumero(document.form1.elements["AutreNo[]"]);
  }
 
  if (issue == 1) {
		msg += "Veuillez saisir un numéro\n";
	}
 
	if (msg == "") return(true);
	else	{
		alert(msg);
		return(false);
	}
}
 
var Compteur = 0;
function Delete_Ligne( obj_){
  var Parent;
  var Obj = obj_;
  if( Obj){
    do{							//-- tant que pas la balise <TR>
       Obj = Obj.parentNode;
    }while( Obj.tagName != "TR")
    Parent = Obj.parentNode;	//-- Recup du parent
    if( Parent){				//-- Suppression de la ligne
      Parent.deleteRow( Obj.rowIndex)
      --Compteur;
	}
  }
}
function Create_Ligne(){
	if (Compteur <5){		//-- compteur pour limiter le nb de champ texte à 5 max
  		var O_Table = document.getElementById('T_INSERT');	//-- Get objet tableau
  		var NbrLigne = O_Table.rows.length;	//-- Get nombre de ligne du tableau
  		var Pos = NbrLigne;					//-- Position d'insertion
  		O_Row  = O_Table.insertRow( Pos);		//-- Insertion d'une ligne
  		Compteur++;							//-- Insertion d'une cellule
  		O_Cell = O_Row.insertCell(0);			//-- Insertion d'une autre cellule
  		O_Cell.innerHTML = 'Autre N°:';
  		O_Cell = O_Row.insertCell(1);
  		O_Cell.innerHTML = '<input type="text" name="AutreNo[]" size="5" />';
  		O_Cell = O_Row.insertCell(2);
  		O_Cell.innerHTML = '<input type="button" value=" - " onClick="Delete_Ligne(this)">';
	}
}
//-->
</script>
<form action="page.html" method="post" enctype="application/x-www-form-urlencoded" name="form1"  onSubmit="return check();">
<table>
	<td>Numéro:
   <input type="text" name="NoContenant" size="4" onKeyUp="javascript:couleur(this);" /></td>
  	</tr>
 </table>
<table border="0">
<table id="T_INSERT">
<tr>
<td>Autre N°:</td>
<td><input type="text" name="AutreNo[]" size="5"/>
<td><input name="button" type="button" onClick="Create_Ligne()" value="  +  ">
</tr>
</table>
 <input type="submit" name="Submit" value="Envoyer">   
</form>
</body>
</html>

ERE

**alaska750** · 22/09/2009, 20h22

Hello,

Ca c'est ce que j'appelle un joli coup (pas évident d'ailleurs), ta solution semble fonctionner à merveille !

Un grand M E R C I à toi !

**Bovino** · 23/09/2009, 06h49

Code html :

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

1
2
3
4
5
<table>
	<td>Numéro:
   <input type="text" name="NoContenant" size="4" onKeyUp="javascript:couleur(this);" /></td>
  	</tr>
 </table>

Attention, ta table est mal faite, il manque la balise ouvrante <tr>

Test d'un input text dynamique avec js

JavaScript

Discussions similaires

Partager

Partager