Afficher un nombre de checkbox en fonction d'un input type text

Version imprimable

Bonjour,

je cherche à afficher un nombre de checkbox en fonction du nombre entré par l'utilisateur auparavant.
Le bout de code pour montrer ou j'en suis pour le moment :

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
 
			<form method="POST" action="resultatAjoutMangas.php" enctype="multipart/form-data">
			<table>
				<tr>
					<td>Titre du manga :</td>
					<td><input type="text" name="titre" size="50" /></td>
				</tr>
				<tr>
					<td>Auteur du manga :</td>
					<td><input type="text" name="auteur" size="50" /></td>
				</tr>
				<tr>
					<td>Nombre de tomes disponibles :</td>
					<td><input type="text" name="dispo" size="1" /></td>
				<tr>	
					<td>Liste des tomes possédés :</td>
					<td>
					<?php
						$i = valueOf("dispo");
						for ($j=0;$j=$i;$j++)
						{
							echo '<input type="checkbox" value='.$i.' name="possede" />';
							$j++;
						}
					?>
					</td>
				</tr>
				<tr>
					<td>Résumé du manga :</td>
					<td><textarea rows="20" cols="50" name="resume" /></textarea></td>
				</tr>
				<tr>
					<td>Image illustrative :</td>
					<input type="hidden" name="MAX_FILE_SIZE" value="300000" >
					<td><input type="file" id="file" name="image"></td>
				</tr>
			</table>
			<div align=center>	
			<input type="submit" value="Ajouter" name="OK"><input type="reset" value="Remise à zéro" name="RAZ">
			</div>
			<br />
			</form>

Est-ce que cette méthode est possible en PHP ? Faut il rajouter du JS dessus pour l'affichage dynamique ?

Je continue mes recherches, merci à ceux qui auront une réponse :)

07/09/2012, 10h54
Celira

Si tu veux que ce soit dynamique, donc sans rechargement de la page, il va forcément te falloir du Javascript.
Le plus simple à mon sens, c'est de mettre un evenement onChange sur ton champ text, qui appelle la fonction js qui crée les checkboxes.

Bon, je suis en train de me perdre avec JS :aie:

Le code :
Code:

1 2 3 4 5 6 7 8 9 10 11 12 13 14 function ajoutCheckBox(nombre) { var nombre = document.getElementById('dispo'); var j; var cb = document.createElement('input'); cb.type = 'checkbox'; for ($j=1;$j=nombre;$j++) { cb.name = 'possede[]'; cb.value = j; $j++; } }
qui est appelé par :
Code:

1 2 3 4 5 <tr> <td>Nombre de tomes disponibles :</td> <td><input type="text" name="dispo" size="1" onChange="ajoutCheckBox(this.selectedValue)"/></td> </tr>
et qui est censé afficher le résultat dans :
Code:

1 2 3 4 5 6 7 <tr> <td>Liste des tomes possédés :</td> <td> </td> </tr>
J'ai l'impression de mélanger PHP/HTML/JS dans la même fonction ce qui fait que rien ne se passe sur ma page quand je remplit le champ text appelant la fonction onChange.

Edit : j'ai modifié la fonction JS, normalement c'est du full JS cette fois ci. Pourtant, je n'ai aucune checkbox qui se crée lorsque je switch de champ une fois que j'ai saisi le nombre de tomes disponibles.
J'ai utilisé brièvement l'outil dispo sur Chrome et je n'ai aucune erreur lors du passsage de la fonction onChange.
Help svp :(

Si quelqu'un a le courage de m'aider à démêler tout ce binz, merci :D

Ah, j'ai réussi à avancer ! (un tout petit peu :aie:)
Code:

1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 <SCRIPT type="text/javaScript"> function ajoutCheckBox(nombre) { alert("test"); var nombre = document.getElementById('dispo').value var j; for ($j=1;$j=nombre;$j++) { var cb = document.createElement('input'); cb.type = 'checkbox'; cb.name = 'possede[]'; cb.value = j; } } </script>
et la partie appelante :
Code:

1 2 3 4 5 <tr> <td>Nombre de tomes disponibles :</td> <td><input type="text" name="dispo" id="dispo" size="1" onChange="ajoutCheckBox(this.value)"/></td> </tr>
Donc, j'ai bien l'alert test qui s'affiche, donc il rentre bien dans la fonction, par contre l'onglet freeze ensuite.
Donc, soit le fonctionnement de la boucle for diffère en JS et j'ai sûrement une boucle infinie, soit y a autre chose que j'ai pas compris.

Si vous voyez une solution, merci :)

13/09/2012, 11h39
Bovino

Code:

for ($j=1;$j=nombre;$j++)

Oh... la jolie boucle infinie :mouarf:

Il faut différencier une affectation (=) et une comparaison (== ou ===) :whistle:

Oups :aie:
Merci de ta réponse, je continue mes test !

Edit : Aaaah ! J'ai réussi à en créer !

Code:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
 
<SCRIPT type="text/javaScript">
			function ajoutCheckBox(nombre)
			{	
				alert("test");
				var nombre = document.getElementById('dispo').value
				alert(nombre);
				for (j=1;j<=nombre;j++)
				{
					alert("J = " + j);
					var cb = document.createElement('input');
					cb.type = 'checkbox';
					cb.name = 'possede[]';
					cb.value = j;
					container.appendChild(cb);
				}				
				alert("Valeur finale : " + j);
 
			}
		</script>

Plus qu'a trouver comment les placer au bon endroit et leur ajouter un nom et c'est bingo !