Incrémentation d'un name en JavaScript

Version imprimable

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 :aie: 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
:mrgreen:
Voici mon code js:
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 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=' '>-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); }

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:

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=' '>-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:

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)

Bonjour,

Code:

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+.

28/12/2011, 10h52
andry.aime

Citation:

Envoyé par RomainVALERI

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

Code:

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

A+.
28/12/2011, 11h30
lamb87

Merci c'est exactement ce que je cherchais :ccool:

Mais dans ta solution Romain VALERI, elle se fait quand l'incrémentation de num ? :?
28/12/2011, 12h08
Torgar

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;
28/12/2011, 13h12
lamb87

Merci Torgar tu viens d'éclairer mon chemin :ccool:

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

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 8-)

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:

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:

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 8O

28/12/2011, 14h05
andry.aime

Citation:

Envoyé par lamb87

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

Citation:

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.

Citation:

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+.
28/12/2011, 14h18
lamb87

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

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 8O

Code:

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

28/12/2011, 14h34
lamb87

J'ai testé, il n'y a aucunes erreur mais rien ne s'affiche 8O
28/12/2011, 14h39
Torgar
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:

1 2 3 echo '<xmp>'; print_r($_POST); echo '</xmp>';
28/12/2011, 14h40
andry.aime

Peut-on voir le code html de ton formulaire?

A+.

J'ai tout mis dans le doute :?

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

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>

28/12/2011, 14h57
andry.aime

Remplace ton code JS par le mien qui incrémente la variable globale i.
28/12/2011, 15h12
lamb87

J'ai exactement le même j'ai quand même fais un copier/collé mais non çà ne change rien du tout :(
28/12/2011, 15h51
andry.aime

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

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
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);
}

28/12/2011, 18h22
andry.aime

Fait un vardump pour vérifier

Code:

var_dump($_POST);
29/12/2011, 08h54
lamb87

Bonjour,
J'ai mis le var_dump($_POST) dans mon fichier de réception et il me retourne "array(0) { }" ... çà veut bien dire qu'il ne contient rien non ? :(

Je connais pas var_dump j'ai fais une recherche mais çà a l'air pas mal :D
29/12/2011, 10h52
andry.aime

Citation:

<form action="DetailCommande.php">

par défaut, la méthode d'un formulaire est GET donc ça passe à l'URL mais pas en POST

Code:

<form action="DetailCommande.php" method="post">

A+.
29/12/2011, 11h05
lamb87

Merci andry.aime çà marche du tonnerre :ccool: mais il me reste une question ...
Comment j'ai pu ne pas y penser ???!!!! :aie:

D'habitude je le met mais là ... j'ai dû oublier mon cerveau sur mon coussin :mrgreen:
Quoi qu'il en soit merci a tous et surtout je remercie ce forum et ses membres compétents ;)

A+