Boucle dont la variable peut changer sur une seule ligne ?

**geeka** · 10/04/2015, 13h58

Bonsoir,
Ma question n'est peut-être pas très claire, j'explique : je souhaite changer dans mon code JavaScript des lignes d'instructions en une boucle,une façon de faire plus court et de ne pas utiliser plusieurs variables.
Voici le code :

Code :

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

1
2
3
4
5
6
7
8
9
function create_champ(i) {
	var i2 = i + 1;
	var a = 1;
	var b = a - 1;
	var c = a;
	var d = a + 1;
	document.getElementById('leschamps_'+i).innerHTML = '<fieldset><div class="row"><section class="col col-6"><label class="input"><i class="icon-append fa fa-user"></i><input type="text" name="nom_pers_['+i+']['+b+']" id="nom_pers" placeholder="Nom "></label></section><section class="col col-6"><label class="input"><i class="icon-append fa fa-user"></i><input type="text" name="nom_pers_['+i+']['+c+']" id="nom_pers" placeholder="Prénom "></label></section></div><section><label class="input"><input type="text" name="nom_pers_['+i+']['+d+']" id="nom_pers" placeholder="Fonction "></label><i></i></section>';
	document.getElementById('leschamps_'+i).innerHTML += (i <= 10) ? '<br /><span id="leschamps_'+i2+'"><a href="javascript:create_champ('+i2+')">Ajouter un champs</a></span>' : '';
}

Ce code permet d'ajouter des champs dans un formulaire.
Je voudrais remplacer les variables a,b,c, d par une seule variable (sachant qu'elles sont utilisées sur une seule ligne), en utilisant une boucle.
Est-ce possible ?

Merci

**SpaceFrog** · 10/04/2015, 15h35

Elle est où la boucle ?

**gustave02** · 10/04/2015, 15h40

bonjour
je t'ai surement pas compris. si c'est le cas désolé.

tu mets var i2 = i + 1; et '<br /><span id="leschamps_'+i2+'"><a href="javascript:create_champ('+i2+')">A

moi je resume '<br /><span id="leschamps_'+(i + 1)+'"><a href="javascript:create_champ('+(i + 1)+')">A

et tu met var a = 1; et var c = a; pourquoi avoir c ?

puis var b = a - 1; pour moi b=0 donc " ><input type="text" name="nom_pers_['+i+']['+b+']" id="nom_pers" p " == " ><input type="text" name="nom_pers_['+i+'][0]" id="nom_pers" p"

si je suis a coté désolé
@+gustave02

**geeka** · 10/04/2015, 16h22

Elle est où la boucle ?

Ma boucle ne fonctionne pas.

Code :

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

1
2
3
4
5
6
7
8
 
// Ici la taille des indices est juste mise pour un exemple
for (k=0; k<=2;k++){                // j'ai mis un k pour différencier avec le i déjà utilisé
               for (j=0; j<=3;j++){
		       a=0;             //a est la valeur à mettre
				}
					a++;
			}

Voici un exemple du fonctionnement de la fonction.
Les valeurs en rouge représentent les résultats des variables b,c,d écrites dans le code précédent. On devrait toujours avoir ce résultat pour n lignes et m colonnes.
i\j| 0 | 1 | 2 | 3 |
---------------------------
0 | 0 | 1 | 2 | 3 |
----------------------------
1 | 0 | 1 | 2 | 3 |
----------------------------
2 | 0 | 1 | 2 | 3 |
----------------------------

A noter que je devrais écrire: nom_pers_[i][valeurs : b,c,d ....] ce qui correspond à :
formulaire 1 : nom_pers[0][0] , nom_pers[0][1], nom_pers[0][2]
formulaire 2 : nom_pers[1][0], nom_pers[1][1], nom_pers[1][2]
formulaire 3 : nom_pers[2][0], nom_pers[2][1], nom_pers[2][2]
ce qui équivaut à la matrice.

**geeka** · 10/04/2015, 16h40

@ gustave02
Merci pour votre réponse.
En fait, je n'ai pas bien compris votre code, plus précisément ici :

Code :

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

1
2
3
 
b=0 ;
<input type="text" name="nom_pers_['+i+']['+b+']" id="nom_pers" p " == " ><input type="text" name="nom_pers_['+i+'][0]" id="nom_pers" p"

Ici les 2 input ont la même valeur dans le 2ème indice, c'est le zéro. Or le 2ème devra être incrémenté de 1.
Je ne sais pas ce que vous avez compris, quelles sont les valeurs que vous voulez faire sortir de ce code-là ?

**gustave02** · 10/04/2015, 17h16

j'au du mal, je ne dois pas comprendre ta question.

tu cherche a lire un tableau associtifs avec deux boucle? "nom_pers"

Code :

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

1
2
3
4
5
6
 
for (k=0; k<=2;k++){          
     for (j=0; j<=3;j++){
		      alert(nom_pers[k][j] );//tu lis ton tableau case après case
    }
}

excuse si je suis a coté.
@+gustave02

**geeka** · 13/04/2015, 09h39

bonjour gustave,
C'est cela, je cherche à lire un tableau, ou plus exactement plusieurs tableaux, puis récupérer leur valeur et les insérer dans un BDD.
Il faudra utiliser le j et le k dans cette ligne :

Code :

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

document.getElementById('leschamps_'+i).innerHTML = '<fieldset><div class="row"><section class="col col-6"><label class="input"><i class="icon-append fa fa-user"></i><input type="text" name="nom_pers_['+i+']['+b+']" id="nom_pers" placeholder="Nom "></label></section><section class="col col-6"><label class="input"><i class="icon-append fa fa-user"></i><input type="text" name="nom_pers_['+i+']['+c+']" id="nom_pers" placeholder="Prénom "></label></section></div><section><label class="input"><input type="text" name="nom_pers_['+i+']['+d+']" id="nom_pers" placeholder="Fonction "></label><i></i></section><div class="row"><section class="col col-6"><label class="input"><i class="icon-append fa fa-phone"></i><input type="tel" name="nom_pers_['+i+']['+e+']" id="tel_m" placeholder="Téléphone mobile"></label></section><section class="col col-6"><label class="input"><i class="icon-append fa fa-phone"></i><input type="tel" name="nom_pers_['+i+']['+f+']" id="tel_d" placeholder="Téléphone domicile"></label></section></div><div class="row"><section class="col col-6"><label class="input"><i class="icon-append fa fa-phone"></i><input type="tel" name="nom_pers_['+i+']['+g+']" id="tel_p" placeholder="Téléphone bureau"></label></section></div><div class="row"><section class="col col-6"><label class="input"><i class="icon-append fa fa-envelope-o"></i><input type="email" name="nom_pers_['+i+']['+h+']" id="mail_pers" placeholder="Mail"></label></section><section class="col col-6"><label class="input"><i class="icon-append fa fa-phone"></i><input type="tel" name="nom_pers['+i+']['+j+']" id="fax_pers" placeholder="Fax"></label></section></div><section><label class="label">Description du contact</label><label class="textarea"><i class="icon-append fa fa-comment"></i><textarea rows="4" name="nom_pers_['+i+']['+k+']" id="desc_pers"></textarea></label></section></fieldset>';

Le problème qui se pose c'est la valeur du j. Puisque le k ne changera pas de valeur tout au long de la ligne, ce qui n'est pas le cas pour le j.

**gustave02** · 13/04/2015, 10h41

peux tu envoyer un exemple concret mais simple de ton tableau?
@gustave02

**geeka** · 13/04/2015, 11h03

Je vous donne le formulaire :

Code html :

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
<div class="row">
      <!--Nom contact 1-->
		<section class="col col-6">
			<label class="input">
				<i class="icon-append fa fa-user"></i>
				<input type="text" name="nom_pers_[0][0]" id="nom_pers" placeholder="Nom "/>
			</label>
		</section>
	<!--Fin Nom contact 1-->
	<!--PRénom -->
		<section class="col col-6">
			<label class="input">
				<i class="icon-append fa fa-user"></i>
				<input type="text" name="nom_pers_[0][1]" id="nom_pers" placeholder="Prénom "/>
			</label>
		</section> 
	<!--PRénom-->
	</div>	
	<!--Fonction 1-->	
		<section>
			<label class="input">
				<input type="text" name="nom_pers_[0][2]" id="nom_pers" placeholder="Fonction ">
					</label>
					<i></i>
		</section>	
	<!--Fin Fonction 1-->

EDIT:
Ici il y a 3 tableaux qui correspondent aux tableaux nom (noms des personnes saisies), prénom et fonction de la 1ère personne.
J'aurais dû choisir un nom plus général que nom_pers pour représenter les tableaux

**gustave02** · 13/04/2015, 11h26

moi je vois trois champ de texte imput un pour récupérer un nom l' autre un prénom et le troisième la fonction.

tu veux faire quoi? remplir les champs de texte ? récupérer les infos rentré par un utilisateur? les multiplier?

@+gustave02

**geeka** · 13/04/2015, 11h35

Je voudrais récupérer les infos de l'utilisateur et les insérer correctement en base de données.
Je cherche à optimiser le code, car il fonctionne déjà avec le a b c d .

**gustave02** · 13/04/2015, 11h45

tu n'as que trois champs de texte ?
les infos vont être transmise a un fichier php qui va gérer la sql ?

@+gustave02

**geeka** · 13/04/2015, 11h48

Non j'en ai plus, c'est justement pour pouvoir ajouter des champs facilement que j'ai envie de faire une boucle, sinon y aura bcp de variables pour chaque champ.
Oui, les informations seront transmises en PHP via une requête sql.

**gustave02** · 13/04/2015, 12h03

donc tu auras x champs de textes qui seront les infos d'un contact et un seul ?

tu veux une boucle qui récupère toutes les infos?

le but final est de créer un tableau avec les infos que tu envois au php?
@+gustave02

**geeka** · 13/04/2015, 12h09

donc tu auras x champs de textes qui seront les infos d'un contact et un seul ?

X champs pour plusieurs contacts
Nom : formulaire.png
Affichages : 390
Taille : 19,0 Ko

tu veux une boucle qui récupère toutes les infos?
le but final est de créer un tableau avec les infos que tu envois au php?

Oui, exactement.

**gustave02** · 13/04/2015, 12h48

bien
ma solution simple pour un contact je vois pour plusieur

la page avec les champs de texte imputs (3 dans notre exemple) j'ai changé les id

Code html :

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
<!DOCTYPE html>
<html>
<head>
        <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
	<script>
function loadXMLDoc(){
        var tab = new Array;
        for(var n=1; n <= 3; n++){
                tab.push(document.getElementById("i"+n).value);
        }
        alert(tab);
        var xmlhttp;
        if (window.XMLHttpRequest){// code for IE7+, Firefox, Chrome, Opera, Safari
                xmlhttp=new XMLHttpRequest();
        } else {// code for IE6, IE5
                xmlhttp=new ActiveXObject("Microsoft.XMLHTTP");
        }
        xmlhttp.onreadystatechange=function(){
                if (xmlhttp.readyState==4 && xmlhttp.status==200){
                        document.getElementById("myDiv").innerHTML=xmlhttp.responseText;
                }
        }
        xmlhttp.open("POST","rec.php",true);
        xmlhttp.setRequestHeader("Content-type","application/x-www-form-urlencoded");
        xmlhttp.send("infos="+tab+"");
}
        </script>
</head>
<body>
<div class="row">
      <!--Nom contact 1-->
		<section class="col col-6">
			<label class="input">
				<i class="icon-append fa fa-user"></i>
				<input type="text"  id="i1" placeholder="Nom "/>
			</label>
		</section>
	<!--Fin Nom contact 1-->
	<!--PRénom -->
		<section class="col col-6">
			<label class="input">
				<i class="icon-append fa fa-user"></i>
				<input type="text"  id="i2" placeholder="Prénom "/>
			</label>
		</section>
	<!--PRénom-->
	</div>	
	<!--Fonction 1-->	
		<section>
			<label class="input">
				<input type="text"  id="i3" placeholder="Fonction ">
					</label>
					<i></i>
		</section>	
	<!--Fin Fonction 1-->
 
    <button type="button" onclick="loadXMLDoc()">Envois</button>
					<div id="myDiv"></div>
</body>
</html>

le fichier php

Code php :

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

1
2
3
4
5
6
7
8
9
<?php
 if ( (isset($_POST['infos'])) ) {
           $infos = $_POST['infos'];
 
		   echo("ok + ".$infos);
 } else {
			echo"pas ok";
 }
?>

donc les deux fichier dans le même dossier sur un serveur biensur marche avec wamp pour tester.

j'espere qu'on avance.
@+gustave02

**geeka** · 13/04/2015, 13h11

Merci beaucoup!
La solution ne me parait pas aussi simple pour moi

mais c'est bien

**gustave02** · 13/04/2015, 13h23

solution avec plusieur contact

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
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
 
<!DOCTYPE html>
				<html>
				<head>
                <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
					<script>
 
 
						function loadXMLDoc(){
							var tab = new Array;
							for(var n=0; n <4; n++){
								var tab2 = new Array;
								for(var n2=0; n2 < 3; n2++){
									tab2.push(document.getElementById("nom_pers_["+n+"]["+n2+"]").value); 
								}
								tab.push(tab2);
							}
							alert(tab);
							var xmlhttp;
							if (window.XMLHttpRequest){// code for IE7+, Firefox, Chrome, Opera, Safari
								xmlhttp=new XMLHttpRequest();
							} else {// code for IE6, IE5
								xmlhttp=new ActiveXObject("Microsoft.XMLHTTP");
							}
							xmlhttp.onreadystatechange=function(){
								if (xmlhttp.readyState==4 && xmlhttp.status==200){
									document.getElementById("myDiv").innerHTML=xmlhttp.responseText;
								}
							}
							xmlhttp.open("POST","rec.php",true);
							xmlhttp.setRequestHeader("Content-type","application/x-www-form-urlencoded");
							xmlhttp.send("infos="+tab+"");
						}
					</script>
				</head>
 
<body>
<div class="row">
<div class="row">
      <!--Nom contact 1-->
		<section class="col col-6">
			<label class="input">
				<i class="icon-append fa fa-user"></i>
				<input type="text"  id="nom_pers_[0][0]" placeholder="Nom "/>
			</label>
		</section>
	<!--Fin Nom contact 1-->
	<!--PRénom -->
		<section class="col col-6">
			<label class="input">
				<i class="icon-append fa fa-user"></i>
				<input type="text"  id="nom_pers_[0][1]" placeholder="Prénom "/>
			</label>
		</section> 
	<!--PRénom-->
	</div>	
	<!--Fonction 1-->	
		<section>
			<label class="input">
				<input type="text" id="nom_pers_[0][2]" placeholder="Fonction ">
					</label>
					<i></i>
		</section>	
	<!--Fin Fonction 1-->
 
 
    <div class="row">
      <!--Nom contact 1-->
		<section class="col col-6">
			<label class="input">
				<i class="icon-append fa fa-user"></i>
				<input type="text" id="nom_pers_[1][0]" placeholder="Nom "/>
			</label>
		</section>
	<!--Fin Nom contact 1-->
	<!--PRénom -->
		<section class="col col-6">
			<label class="input">
				<i class="icon-append fa fa-user"></i>
				<input type="text"  id="nom_pers_[1][1]" placeholder="Prénom "/>
			</label>
		</section> 
	<!--PRénom-->
	</div>	
	<!--Fonction 1-->	
		<section>
			<label class="input">
				<input type="text" id="nom_pers_[1][2]" placeholder="Fonction ">
					</label>
					<i></i>
		</section>	
	<!--Fin Fonction 1-->
 
 
    <div class="row">
      <!--Nom contact 1-->
		<section class="col col-6">
			<label class="input">
				<i class="icon-append fa fa-user"></i>
				<input type="text" id="nom_pers_[2][0]" placeholder="Nom "/>
			</label>
		</section>
	<!--Fin Nom contact 1-->
	<!--PRénom -->
		<section class="col col-6">
			<label class="input">
				<i class="icon-append fa fa-user"></i>
				<input type="text" id="nom_pers_[2][1]" placeholder="Prénom "/>
			</label>
		</section> 
	<!--PRénom-->
	</div>	
 
	<!--Fonction 1-->	
		<section>
			<label class="input">
				<input type="text" id="nom_pers_[2][2]" placeholder="Fonction ">
					</label>
					<i></i>
		</section>	
	<!--Fin Fonction 1-->
 
 
 
 
     <div class="row">
      <!--Nom contact 1-->
		<section class="col col-6">
			<label class="input">
				<i class="icon-append fa fa-user"></i>
				<input type="text" id="nom_pers_[3][0]" placeholder="Nom "/>
			</label>
		</section>
	<!--Fin Nom contact 1-->
	<!--PRénom -->
		<section class="col col-6">
			<label class="input">
				<i class="icon-append fa fa-user"></i>
				<input type="text" id="nom_pers_[3][1]" placeholder="Prénom "/>
			</label>
		</section> 
	<!--PRénom-->
	</div>	
	<!--Fonction 1-->	
		<section>
			<label class="input">
				<input type="text" id="nom_pers_[3][2]" placeholder="Fonction ">
					</label>
					<i></i>
		</section>	
	<!--Fin Fonction 1-->
 
    <button type="button" onclick="loadXMLDoc()">Envois</button>
					<div id="myDiv"></div>
</body>
</html>