Ajout de zone de texte [Résolu]

[aljessy]

Bonjour j'ai un petit problème.
J'ai un petit formulaire et j'aimerais que lorque l'utilisateur clique sur le bouton "ajouter", qu'un autre champ de texte apparaissent pour le permettre de saisir plusieurs élément comme par exemple ajouter plusieurs pièces jointes à un formulaire.
Voici un bout de code que j'ai fais

Code :

1
2
3
4
<tr>
    <td><input tpye="text" name="val"/></td>
    <td><input type="submit" name="ajout"/><td>
</tr>

[sirbaldur]

Bonjour,

pour ajouter des champs dynamique, il faut te tourner vers du javascript qui va rajouter du code html à ta page.

[loacast]

Une manière propre de faire ça en quelques lignes peut-être d'utiliser le toggle JQuery :

http://api.jquery.com/toggle/

Tu places tes éléments dans une div :

Code :

1
2
3
<div id="element_to_toggle" style="display: none;">
    <input type="text" name="mon_name" value="Ma valeur" />
</div>

Puis tu n'as plus qu'à suivre la documentation en lien ci-dessus.

[aljessy]

Merci les gars pour vos réponses mais un petit bout de code m'aiderais à mieux avancer. Car que faire si l'on peut ajouter un nombre très grand?

[skanner]

Une technique que j'ai utilisé qui marche pas trop mal, et qui évite de se servir de Jquery, ça mélange CSS/xHTML et JS :

Tout d'abord, tu code ta propre fonction Toggle, qui va utiliser une propriété CSS : Display.
Cette propriété Display peut prendre plusieurs valeurs (18 au total), celles qui nous intéresseront sont 'Block' et 'None'.
Block signifie grossièrement que tu va afficher un élément de type Bloc (Cf. http://htmlhelp.com/reference/html40/block.html )
None signifie, tu l'auras compris , ne pas afficher.

Voilà donc la fonction en JS que tu placera entre des balises <script></script> ou dans un fichier *.js externe.

Code :

1
2
3
4
5
6
7
8
9
 
function toggle('nomdetonblock'){
	var div = document.getElementById('nomdetonblock')
	if (div.style.display == 'none') {
		div.style.display = 'block'
	} else {
		div.style.display = 'none'
	}
}

Dans cette fonction, tu as un argument, l'id de la balise que tu veux afficher (Cf. exemple plus bas)

Voilà, donc cette fonction tu va l'appeller au travers de la propriété onClick d'une balise (qui peut être un lien, un bouton, etc ...).
Cette propriété onClick, déclenche une fonction lorsque l'on clique sur l'élément (ton bouton, lien, ...) qui correspond à la balise(donc un input, a href, etc ...) qui porte cette propriété.

Code :

1
2
3
 
<input type = "submit" name = "Afficher" onClick = "toggle('upload')" value = "Afficher" />
<input type = "file" id = "upload" style="display: none"/>

Dans le code ci dessus, l'appui sur le bouton Afficher va provoquer l'affichage de la balise upload.

Voilà l'exemple pour un contrôle, pour plusieurs tu peux repartir de cette fonction, en faisant entrer une liste d'id correspondant aux contrôles que tu veux faire apparaître, par exemple.

Maintenant, il te reste aussi Jquery qui est une formidable bibliothèque JS, à toi de voir !

Cordialement,

BENOIT J.

[Billy KiT]

Envoyé par sirbaldur

Bonjour,

pour ajouter des champs dynamique, il faut te tourner vers du javascript qui va rajouter du code html à ta page.

Salut, peut-être en manipulant les objets DOM, c'est la meilleure façon de créer des objets dynamiquement. Voici un code à adapter :

Code :

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
<script type="text/javascript"> 
function ajouteChamps(ici) {
	var newTR = document.createElement("tr"); // crée un élément tr
	ici.appendChild(newTR); // ajoute le tr au tbody
	var newTD = document.createElement("td"); // crée un élément td
	newTR.appendChild(newTD); // ajoute le td au tr
	//newTD.appendChild(document.createTextNode('toto')); pour ajouter du texte
	var newINPUT = document.createElement("input"); // crée l'input
	newINPUT.setAttribute('type','text'); // ajoute ses attributs
	newTD.appendChild(newINPUT); // ajoute l'input au td
	}
</script>
 
 
<input type="submit" name="ajout" onClick="ajouteChamps(document.getElementById('maTable'))" value="Ajoute un champ"/>
<table>
	<tbody id="maTable">
		<tr>
			<td><input type="text" name="val"/></td>
		</tr>
	</tbody>
</table>

[aljessy]

Merci les gars ca marche très bien mais comment faire pour recuperer les valeurs à chaque fois qu'on les rentre. je prend le cas de 5 valeurs par exemple

[ABCIWEB]

Envoyé par aljessy

Merci les gars ca marche très bien mais comment faire pour recuperer les valeurs à chaque fois qu'on les rentre. je prend le cas de 5 valeurs par exemple

Y'a pas de différence avec un formulaire statique, les valeurs des input générés (soit avec une méthode display, soit avec une modification du DOM avec javascript) vont être transférées dans le tableau $_POST ou $_GET suivant la méthode que tu utilise.

[aljessy]

vue que je ne connait pas à l'avance le nombre d'élément que l'utilisateur doit rentrer devrait je mettre une boucle while pour récuperer les champs? C'est a dire

Code :

1
2
3
4
5
while(i>0){
    // i nombre de champs renseigner par l'utilisateur
    $ch+i=$_POST['val'];
    i--;
}

[Billy KiT]

il faut donner un nom incremental à chaque champ texte :

Code :

var nbINPUT = 0; // variable globale, initialisation

Code :

1
2
nbINPUT ++;
newINPUT.setAttribute('name','val'+nbINPUT); // val1, val2, val3, ...

en PHP :

Code :

1
2
3
4
5
$i=1;
while (isset($_POST['val'.$i]))  { 
    ...;
    $i++;
    }

à tester

[stealth35]

plutôt faire un tableau : val[]

[ABCIWEB]

Il y a un exemple dans le manuel ici

C'est plus simple d'utiliser la méthode de stealth35 car dans ton code javascript il te suffit de générer un input supplémentaire sans incrément, ayant juste la forme d'un tableau comme "userfile[]" (pour reprendre l'exemple du manuel), et ensuite côté php il te suffit de lister ton tableau avec un basic foreach.

[aljessy]

Merci pour votre aide