Incrémentation d'un name en JavaScript

**lamb87** · 28/12/2011, 09h29

Bonjour,

J'ai un tableau php/html qui est généré par du javascript à l'aide d'un OnClick(). Jusqu'ici tout va bien çà fonctionne parfaitement

Par contre, lorsque je génère mon select pour ma liste déroulante, le name ne change pas ... Je ne sais pas du tout comment faire car je suis débutant en js

je pense bien qu'il faut incrémenter un nombre qui serait dans le name mais comme je vous l'ai dis je sais pas du tout faire en js ...

Si quelqu'un peut m'aider je le remercie d'avance

Voici mon code js:

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 insRow()
{
	var x=document.getElementById('myTable').insertRow(0);
	var a=x.insertCell(0);
	var b=x.insertCell(1);
	var c=x.insertCell(2);
	var d=x.insertCell(3);
	var e=x.insertCell(4);
	var f=x.insertCell(5);
	var g=x.insertCell(6);
	a.innerHTML="Type : ";
	b.innerHTML="<select id='type' name='type' style='top:0;left:0;width:150px;'>" +
			"		<option value='&nbsp;'>-selectionnez-</option>" +
			"		<option value='carton'>carton</option>" +
			"	 </select>";
	c.innerHTML="Entre les pages ";
	d.innerHTML="<input type='text' value='1' name='firstInter' size='1' maxlength='3'/>";
	e.innerHTML=" et ";
	f.innerHTML='<input type="text" value="1" name="finalInter" size="1" maxlength="3"/>';
	g.innerHTML='<a href="#" onclick="suppLigne(this.parentNode.parentNode)"> Supprimer </a>';
}
 
function suppLigne( ligne)
{
	ligne.parentNode.removeChild( ligne);
}

**RomainVALERI** · 28/12/2011, 10h47

Si tu parles d'incrémenter, je suppose que cette fonction insRow est appelée plusieurs fois consécutives, et que tu veux avoir dans chaque ligne un select avec un name unique ^^

Au moment ou tu appelles ta fonction insRow, passe-lui une variable que tu incrémentes après. Pour ça, il faudrait voir où (et comment) est appelée ta fonction insRow, mais en tout cas ça donnerait :

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 insRow(num)
{
	var x=document.getElementById('myTable').insertRow(0);
	var a=x.insertCell(0);
	var b=x.insertCell(1);
	var c=x.insertCell(2);
	var d=x.insertCell(3);
	var e=x.insertCell(4);
	var f=x.insertCell(5);
	var g=x.insertCell(6);
	a.innerHTML="Type : ";
	b.innerHTML="<select id='type' name='type'" + num + " style='top:0;left:0;width:150px;'>" +
			"		<option value='&nbsp;'>-selectionnez-</option>" +
			"		<option value='carton'>carton</option>" +
			"	 </select>";
	c.innerHTML="Entre les pages ";
	d.innerHTML="<input type='text' value='1' name='firstInter' size='1' maxlength='3'/>";
	e.innerHTML=" et ";
	f.innerHTML='<input type="text" value="1" name="finalInter" size="1" maxlength="3"/>';
	g.innerHTML='<a href="#" onclick="suppLigne(this.parentNode.parentNode)"> Supprimer </a>';
}
 
function suppLigne( ligne)
{
	ligne.parentNode.removeChild( ligne);
}

Et par exemple à l'appel (qui doit être dans une boucle while ou for je suppose) :

Code javascript :

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

1
2
3
4
5
for (var i = 0; i < max; ++i) {
   // ...
   insRow(i);
   // ...
}

Dernière remarque : l'id doit être unique sur une page, donc puisque tu as un compteur, profites-en pour l'appliquer à l'id aussi, histoire de le rendre unique lui aussi ^^ (même modus operandi)

**andry.aime** · 28/12/2011, 10h48

Bonjour,

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
var i = 0;
function insRow()
{
	var x=document.getElementById('myTable').insertRow(0);
	var a=x.insertCell(0);
	var b=x.insertCell(1);
	var c=x.insertCell(2);
	var d=x.insertCell(3);
	var e=x.insertCell(4);
	var f=x.insertCell(5);
	var g=x.insertCell(6);
	a.innerHTML="Type : ";
	b.innerHTML="<select id='type"+i+"' name='type"+i+"' style='top:0;left:0;width:150px;'>" +
			"		<option value='&nbsp;'>-selectionnez-</option>" +
			"		<option value='carton'>carton</option>" +
			"	 </select>";
	c.innerHTML="Entre les pages ";
	d.innerHTML="<input type='text' value='1' name='firstInter' size='1' maxlength='3'/>";
	e.innerHTML=" et ";
	f.innerHTML='<input type="text" value="1" name="finalInter" size="1" maxlength="3"/>';
	g.innerHTML='<a href="#" onclick="suppLigne(this.parentNode.parentNode)"> Supprimer </a>';
i++;
}

L'id doit être unique dans un document.

A+.

**andry.aime** · 28/12/2011, 10h52

Envoyé par RomainVALERI

b.innerHTML="<select id='type' name='type'" + num + " style='top:0;left:0;width:150px;'>"

Code :

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

b.innerHTML="<select id='type" + num + "' name='type" + num + "'style='top:0;left:0;width:150px;'>"

A+.

**lamb87** · 28/12/2011, 11h30

Merci c'est exactement ce que je cherchais

Mais dans ta solution Romain VALERI, elle se fait quand l'incrémentation de num ?

**Torgar** · 28/12/2011, 12h08

Par la boucle for(var i = 0; i < max; ++i), c'est à cet endroit (++i) que ce fait l'incrémentation.
A chaque passage de la boucle, ta fonction sera exécutée avec la valeur de i qui augmentera tant qu'elle ne sera pas égale à la valeur de la variable max.

Cette variable max doit être définie au préalable avec le nombre d'itération que tu souhaites.

Par exemple : var max = 10;

**lamb87** · 28/12/2011, 13h12

Merci Torgar tu viens d'éclairer mon chemin

Je vais faire avec le for parce qu'avant je faisais apparaitre les lignes de tableau avec un OnClick mais bon çà me complique la vie et je commence à saturer sur le problème

Mais bon je dois juste revoir ma façon de procéder. Quoi qu'il en soit merci a tous pour votre aide

--> Résolu

**lamb87** · 28/12/2011, 13h28

Je reviens pour vous demander où mettre le for ... çà peut paraitre stupide comme question mais bon

Je vous montre mon code html et js:

Code :

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

1
2
3
4
5
6
7
8
9
10
11
12
<li>Ajouter un intercalaire : 
			<input type="checkbox" onclick="hide('mondiv');" value="Interc" onLoad="LockUnlockElements()" />
 
			<!-- Partie qui sera cachée par la checkbox -->
 
			<div id="mondiv" class="hidden" >
				<table id="myTable">
					<!-- Emplacement de la zone d apparition de la ligne de sélection des intercalaires -->
				</table>
				<input type="button" onclick="insRow()" value="Ajouter">
			</div>
		</li>

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
function insRow(num)
{
	var x=document.getElementById('myTable').insertRow(0);
	var a=x.insertCell(0);
	var b=x.insertCell(1);
	var c=x.insertCell(2);
	var d=x.insertCell(3);
	var e=x.insertCell(4);
	var f=x.insertCell(5);
	var g=x.insertCell(6);
	a.innerHTML="Type : ";
	b.innerHTML="<select id='type' name='type" + num + "' style='top:0;left:0;width:150px;'>" +
			"		<option value='&nbsp;'>-selectionnez-</option>" +
			"		<option value='carton'>carton</option>" +
			"	 </select>";
	c.innerHTML="Entre les pages ";
	d.innerHTML="<input type='text' value='1' name='firstInter' size='1' maxlength='3'/>";
	e.innerHTML=" et ";
	f.innerHTML='<input type="text" value="1" name="finalInter" size="1" maxlength="3"/>';
	g.innerHTML='<a href="#" onclick="suppLigne(this.parentNode.parentNode)"> Supprimer </a>';
	var max = 10;
	for (var i = 0; i < max; ++i) {
	   insRow(i);
	}
}
 
 
function suppLigne( ligne)
{
	ligne.parentNode.removeChild( ligne);
}

Pas facile de débuter un langage de programmation quand même

**andry.aime** · 28/12/2011, 14h05

Envoyé par lamb87

J'ai un tableau php/html qui est généré par du javascript à l'aide d'un OnClick().

Envoyé par RomainVALERI

Et par exemple à l'appel (qui doit être dans une boucle while ou for je suppose) :

Je pense que Romain a raté une ligne de ton post.

Envoyé par lamb87

Je reviens pour vous demander où mettre le for ... çà peut paraitre stupide comme question mais bon

Tu n'as pas besoin d'un boucle for car tu appelles la fonction pour ajouter une ligne dans un évènement onclick.

A+.

**lamb87** · 28/12/2011, 14h18

Merci andry.aime du coup pour ton code de tout à l'heure

Un dernier problème cependant, je n'arrive pas à prendre les name avec un $_POST ... je sais que c'est plus du js mais bon si vous le savez merci d'avance ... j'ai jamais été autant bloqué sur un site

**andry.aime** · 28/12/2011, 14h23

Code php :

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

1
2
3
4
$i=0;
while(isset($_POST["type"+$i])){
echo $_POST["type"+$i]."<br/>"
}

**lamb87** · 28/12/2011, 14h34

J'ai testé, il n'y a aucunes erreur mais rien ne s'affiche

**Torgar** · 28/12/2011, 14h39

Rajoute un et tu verras quelles valeurs sont récupérables. Si celles que tu désires ne sont pas présentent, c'est qu'il y a un souci ailleurs.

Code :

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

1
2
3
echo '<xmp>';
print_r($_POST);
echo '</xmp>';

**andry.aime** · 28/12/2011, 14h40

Peut-on voir le code html de ton formulaire?

A+.

**lamb87** · 28/12/2011, 14h42

J'ai tout mis dans le doute

Voici 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
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
<?php
        session_start();
        $_SESSION['prenom'] = 'root';
?>
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
	<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
	<title>Commande</title>
 
	<link rel="stylesheet" type="text/css" href="../css/cacheDiv.css">
	<script src="../js/cacheDiv.js" type="text/JavaScript"></script>
	<script src="../js/tableau.js" type="text/javascript"></script>
</head>
<body>
<form action="DetailCommande.php">
	<br>
	<h1>Option de la commande :</h1>
 
	<!-- 
	************************************************************************************
	** Code de copie d'un fichier et de convertissement en pdf dans la base de donnée **
	************************************************************************************
 	-->
 
	<?php
            include '../class/Autoload.php';
            $file = new Fichier();
            $file->ImportFichier();
        ?>
 
 
 
				<!-- 
				**************************************************
				** Page de sélection des options de la commande ** 
				**************************************************
																-->
 
	<br>
	<ul>
		<li>Imprimer de la page <input type="text" value="1" name="firstP" size="1" maxlength="3"/> &agrave; <input type="text" value="1" name="finalP" size="1" maxlength="3"/></li>
		<li>Nombre d'exemplaires : <input type="text" value="1" name="nbexemp" size="1" maxlength="2"></li>
		<li><table>
			<tr>
				<td>Couleur :</td>
				<td><input type="radio" name="couleur" value="NB">Noir et blanc</td>
			</tr>
			<tr>
				<td></td>
				<td><br><input type="radio" name="couleur" value="C">Couleur</td>
			</tr>
			</table></li>
 
		<li>Ajouter un intercalaire : 
			<input type="checkbox" onclick="hide('mondiv');" value="Interc" onLoad="LockUnlockElements()" />
 
			<!-- Partie qui sera cachée par la checkbox -->
 
			<div id="mondiv" class="hidden" >
				<table id="myTable">
					<!-- Emplacement de la zone d'apparition de la ligne de sélection des intercalaires -->
				</table>
				<input type="button" onclick="insRow()" value="Ajouter">
			</div>
		</li>
 
		<li>Ajouter une couverture :
			<div>
				<input id="nbre_rev1" name="nbre_rev2" type="checkbox" value="1rev" onClick="LockUnlockElements()" checked="checked" onLoad="LockUnlockElements()" />
			</div>
 
			Devant : <select id="rev1" name="rev1"><option selected>En plastique</option></select>
			<br>
			Derri&egrave;re : <select id="rev2" name="rev2"><option selected>Cartonn&eacute;</option></select>
		</li>
 
		<li>Ajouter une reliure :
			<div>
				<input id="nbreliure" name="reliure" type="checkbox" value="" onClick="LockUnlockElements2()" checked="checked" onLoad="LockUnlockElements2()" />
				<select id="reliure" name="Reliure">
					<option value="spirale">En spirale</option>
				</select>
			</div>
		</li>
		<li>Date souhait&eacute;e(aaa/mm/jj) : <input type="text" name="DateSouhaitee"></li>
	</ul>
 
	<div class="button">
		<button type="submit" name="soumettre">Soumettre</button>
		<button type="reset">Annuler</button>
	</div>
 
</form>
</body>
</html>

Voici la page qui reçoit 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
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
<?php
        session_start();
        $_SESSION['prenom'] = 'root';
?>
<!DOCTYPE HTML PUBLIC "-//W3C//Dtd HTML 4.01 transitional//EN" "http://www.w3.org/tr/HTML4/loose.dtd">
<HTML>
<HEAD>
	<meta http-equiv="Content-Type" content="text/HTML; charset=UTF-8">
	<title>D&eacute;tail de votre commande</title>
	<script src="../js/SauvegarderCommande.js" type="text/javascript"></script>
</HEAD>
<BODY>
 
	<h1>D&eacute;tail de votre commande : </h1>
 
	<form action="CommandeEnCours.php">
    	<table>
	    	<tr>
	        	<th>Nom du fichier</th>
	            <th>Extension</th>
	            <th>Nombre de pages</th>
	        </tr>
	        <tr>
	        	<td><?php echo "" . $_SESSION['fnom'] . "";?></td>
	        	<td></td>
	        	<td></td>
	        </tr>
		</table>
 
		Niveau d'urgence :
		<select name="Niveau">
				<?php
                                        //while ($resultat = mysql_fetch_array() )
                                        //{
                                ?>
						<option value="" ></option>
						<option value="" ></option>
				<?php
                                        //}
                                ?>
		</select>
		<br><br>
		<button type="button" name="sauvegarderCommande" OnClick="go()">Sauvegarder</button>
		<button type="submit" name="envoyer">Envoyer</button>
		<button type="reset">Annuler</button>
	</form>
 
	<!-- Insertion de la commande dans la base de donnée -->
 
	<?php 
                $i=0;
                while(isset($_POST["type"+$i]))
                {
                        echo $_POST["type"+$i]."<br/>";
                }
                include '../class/Autoload.php';
                $commande = new Commande();
                $commande->AjouterCommande();
        ?>
 
</BODY>
</HTML>

**andry.aime** · 28/12/2011, 14h57

Remplace ton code JS par le mien qui incrémente la variable globale i.

**lamb87** · 28/12/2011, 15h12

J'ai exactement le même j'ai quand même fais un copier/collé mais non çà ne change rien du tout

**andry.aime** · 28/12/2011, 15h51

As tu fait une selection sur les nouveaux select avant de soumettre ton formulaire?
Peut-on voir ton code js actuel?

**lamb87** · 28/12/2011, 16h00

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
var i = 0;
function insRow()
{
	var x=document.getElementById('myTable').insertRow(0);
	var a=x.insertCell(0);
	var b=x.insertCell(1);
	var c=x.insertCell(2);
	var d=x.insertCell(3);
	var e=x.insertCell(4);
	var f=x.insertCell(5);
	var g=x.insertCell(6);
	a.innerHTML="Type : ";
	b.innerHTML="<select id='type"+i+"' name='type"+i+"' style='top:0;left:0;width:150px;'>" +
			"		<option value='&nbsp;'>-selectionnez-</option>" +
			"		<option value='carton'>carton</option>" +
			"	 </select>";
	c.innerHTML="Entre les pages ";
	d.innerHTML="<input type='text' value='1' name='firstInter' size='1' maxlength='3'/>";
	e.innerHTML=" et ";
	f.innerHTML='<input type="text" value="1" name="finalInter" size="1" maxlength="3"/>';
	g.innerHTML='<a href="#" onclick="suppLigne(this.parentNode.parentNode)"> Supprimer </a>';
i++;
}
 
 
function suppLigne( ligne)
{
	ligne.parentNode.removeChild( ligne);
}