Boucle dont la variable peut changer sur une seule ligne ?

Version imprimable

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:

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

10/04/2015, 15h35
SpaceFrog

Elle est où la boucle ?
10/04/2015, 15h40
gustave02

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

Citation:

Elle est où la boucle ?

Ma boucle ne fonctionne pas.
Code:

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.

10/04/2015, 16h40
geeka
@ gustave02
Merci pour votre réponse.
En fait, je n'ai pas bien compris votre code, plus précisément ici :
Code:

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à ?
10/04/2015, 17h16
gustave02
j'au du mal, je ne dois pas comprendre ta question.

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

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
13/04/2015, 09h39
geeka

Lire plusieurs tableaux

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:

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.
13/04/2015, 10h41
gustave02

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

Je vous donne le formulaire :

Code:

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 :roll:

13/04/2015, 11h26
gustave02

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
13/04/2015, 11h35
geeka

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 .
13/04/2015, 11h45
gustave02

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

@+gustave02
13/04/2015, 11h48
geeka

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.
13/04/2015, 12h03
gustave02

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
13/04/2015, 12h09
geeka

1 pièce(s) jointe(s)

Citation:

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

X champs pour plusieurs contacts
Pièce jointe 174607

Citation:

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.

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:

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:

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

13/04/2015, 13h11
geeka

Merci beaucoup!
La solution ne me parait pas aussi simple pour moi :? mais c'est bien

solution avec plusieur contact

Code:

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>

le php est le même

on avance?
@+gustave02

13/04/2015, 13h31
geeka

ah oui ça avance. :)
13/04/2015, 14h25
gustave02

que doit-on faire de plus?

@+gustave02
15/04/2015, 09h14
geeka
Bonjour gustave,
Au fait, il n'est pas nécessaire d'écrire les input à partir de nom_pers_[1][0], car j'ai une boucle qui permet de le faire :
Code:

1 2 3 4 foreach ($_POST['nom_pers_'] as $v1) { $nom = $v1[0]; $prenom = $v1[1]; $fonction = $v1[2];}
15/04/2015, 09h57
gustave02

tu as donc ta solution?
@+gustave02
15/04/2015, 10h06
geeka

Oui, je ne voulais pas toucher à ça. Je cherchais une solution dans la fonction Javascipt à propos de l'attribution des variables aux input.