ajouter un champ de saisie dans mon formulaire

Version imprimable

Bonjour à tous,

J'ai réalisé un formulaire dans lequel j'ai un champ de saisi et j'ai mis en place un bouton pour permettre à l'utilisateur d'ajouter un champs de texte autant de fois qu'il veut.
Mais ca ne fonction pas

voici mon formulaire
Code:

1 2 3 4 5 6 <form name="frm" method="post" action="form_sondage.php"> <input Type="button" Value="Ajouter une ligne" OnClick="Ajouter();"> <br> <Div ID=saisies> Réponse 1 <input type=reponse size="20" name="reponse1"></Div> </form>
Le script javascript qui permet d'ajouter un champ texte
Code:

1 2 3 4 5 6 7 8 <script> var nlignes = 1; function Ajouter(){ nlignes++; saisies.insertAdjacentHTML("BeforeEnd","<BR>Réponse "+nlignes+"<input type='text' size='20' name='reponse"+nlignes+"'>"); } </script>
J'ai essayer de mettre des alert() pour voir s'il rentrait bien dans ma fonction et les alert() s'affiche bien.
Je ne vois pas comment faire.
Merci d'avance pour votre aide.

19/12/2010, 14h24
SpaceFrog

http://www.developpez.net/forums/d53...form+dynamique

dans le même esprit un DSL (Domain Specific Language) XHTML
http://www.developpez.net/forums/d83...ace-innerhtml/

la différence avec l'approche de spaceFrog une méthode par tag que l'on peut créer directement depuis un élément

les éléments crées possèdent naturellement ces méthodes
pour récupérer un élément de al page qui n'a pas été créé de la sort et utiliser tout de même les méthodes
document. getExtendedElementById
Code:

1 2 3 4 5 6 7 8 9 10 11 <script> var nlignes = 1; var saisies = document. getExtendedElementById('saisies'); function Ajouter(){ nlignes++; saisies.Br() .Text('Réponse ') .Text(nlignes) .InputText('reponse'. nlignes, {size:20}); } </script>
lit la doc dans les cours et les tuto sur creatreElement Versus InnerHTML
A+JYT

19/12/2010, 18h30
Bovino

Sans revenir sur les (excellentes) réponses déjà données, il faut être beaucoup plus rigoureux sur la syntaxe HTML et JavaScript :

:fleche:

Code:

<Div ID=saisies>

même si la syntaxe HTML l'autorise (à l'inverse du XHTML), il est préférable de mettre les balises et attributs en minuscules et de mettre la valeur des attributs entre quotes :

Code:

<div id="saisies">

:fleche:

Code:

<input type=reponse size="20" name="reponse1">

le type reponse n'existe pas pour un input.

:fleche:

Code:

saisies.insertAdjacentHTML(...)

dans ce contexte, "saisies" ne correspond à rien et insertAdjacentHTML n'est pas cross-browser.

:java: :frenchy:

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
<script type="text/javascript">
 
var lg, ch;
 
function q(tag){
	return document.getElementById(tag)
}
 
function plus(){
	lg=q("cadre").getElementsByTagName("input");
	ch=document.createElement("input");
	ch.type="text";
	ch.name="Réponse "+lg.length;
	ch.title=ch.name;
	q("cadre").appendChild(ch);
 
	q("sup").style.display="inline";
}
 
function moins(){
	if(!lg[1]){
		q("sup").style.display="none"
	}
	if(lg[0]){	
		q("cadre").removeChild(lg[lg.length-1])
	}
}
 
</script>
 
<form id="frm" method="post" action="form_sondage.php">
	<div id="cadre" style="width:200px">
	</div>
 
	<p>
		<input type="button" value="ajouter une ligne" onclick="plus()" />
		<input type="button" style="display:none" id="sup" value="supprimer une ligne" onclick="moins()" />
	</p>
</form>

20/12/2010, 09h39
SpaceFrog

Code:

ch.name="Réponse "+lg.length;

vain sous IE <8
20/12/2010, 09h46
javatwister

il me semble bien que non (enfin si, bref);

d'ailleurs, le title reprend bien le name...

j'ai oublié le cas du "name" dynamique impossible :? tu me rappelles?
20/12/2010, 12h16
SpaceFrog

Citation:

name cannot be set at runtime

dixit msdn...
la prise en compte du name est aléatoire et surtout le value de l'objet ainsi créé n'arrive pas coté serveur lors du submit.

A priori c'est chose réglée sur IE8
08/04/2011, 17h19
Meyfarth

Citation:

Envoyé par SpaceFrog

dixit msdn...
la prise en compte du name est aléatoire et surtout le value de l'objet ainsi créé n'arrive pas coté serveur lors du submit.

A priori c'est chose réglée sur IE8

Bonjour,

Voilà quelques temps que je galère sur ce sujet.

J'ajoute des champs de formulaire en Javascript (pas d'autre solution, j'aurais bien fait avec du display mais le nombre de champ est bien trop aléatoire).
Le problème : les champs ajoutés ne sont pas pris en compte dans mon code PHP. J'ai affiché mes variables $_POST, seuls les champs "d'origine" sont pris en compte ...

Une idée pour faire marcher ça ?

PS : j'utilise Firefox 4.

Bonjour,

Code:

1
2
3
4
5
 
var nom = 'test';
var balise=(document.all)?'<input name="'+nom+'">':'<input>'; // on force le nom pour la création du noeud seulement avec ie.
var elem = document.createElement(balise);
elem.name=nom;

08/04/2011, 23h03
Meyfarth

Bonsoir,

Malheureusement, ça ne fonctionne toujours pas ...

Pour information, j'essaye d'ajouter des lignes dans un tableau, comprenant 6 cellules. La première contient 2 hidden, la seconde et la troisième contiennent des select, les 3 autres contiennent des input de type text.

Aucun des champs généré n'est passé au serveur PHP, pourtant le code source est bon.

Salut,
peut-être faut-il repartir d'un exemple simple qui fonctionne
Créer autant d'elements input que l'on souhaite et poster dans un tableau :

Code:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
<html>
<head>
	<script type='text/javascript'>
		function newInput(E) {
			ii = document.createElement("input");
			ii.setAttribute("type","text");
			ii.setAttribute("name","monInput[]");
			E.appendChild(ii);
			E.appendChild(document.createElement("br"));
			}
	</script>
</head>
<body>
	<form action="test.php">
		<input type="button" value="Create Input" onClick="newInput(document.getElementById('monDiv'))">
		<div id="monDiv"></div>
		<input type="submit" value="ENVOYER">
	</form>
</body>
</html>

et test.php

Code:

1
2
3
4
5
<?php
$tab = $_GET['monInput'];
foreach ($tab as $clef=>$valeur)
echo $clef." Reçu : ".$valeur."<br>";
?>

09/04/2011, 00h35
nadox

Citation:

Envoyé par Meyfarth

Aucun des champs généré n'est passé au serveur PHP, pourtant le code source est bon.

Et il ressemble à quoi ce code source ? (le javascript, pas le php)

Oula ... J'en mets qu'une partie !

Je vais donner quelques précisions qui pourraient être utiles alors :
L'utilisateur choisit un champ à ajouter parmi une liste déroulante (nommons là "listeAjout"). En fonction du champ ajouté, une ligne se crée, contenant 9 cellules.
La dernière cellule permet de supprimer la ligne.
Les noms et ID des champs ajoutés à la ligne dépendent du choix de l'utilisateur dans la liste "listeAjout". Les noms ressemblent à "[NOM_CHAMP]-[ID DE "listeAjout"].

A noter : je soumet mon formulaire en POST, peut-être que le problème vient de là.

Note : le code n'est pas encore optimisé. Je préfère faire un code qui fonctionne pour l'optimiser par la suite :)

Code JS (une partie) :
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 // Récupération du tableau var tableau = document.getElementById("liste_champs"); // Création d'une nouvelle ligne var tr_nouvelle_ligne = document.createElement('tr'); // Création des 8 cellules de la ligne var td_cell_0 = document.createElement('td'); var td_cell_1 = document.createElement('td'); var td_cell_2 = document.createElement('td'); var td_cell_3 = document.createElement('td'); var td_cell_4 = document.createElement('td'); var td_cell_5 = document.createElement('td'); var td_cell_6 = document.createElement('td'); var td_cell_7 = document.createElement('td'); // [...] // Création du select permettant à l'utilisateur de choisir un numéro de page var selectPage = document.createElement('select'); selectPage.setAttribute('name', 'num_page-'+idChampPost+''); selectPage.setAttribute('id', 'num_page-'+idChampPost+''); for(var cptPage = 1; cptPage <= nbPage; cptPage++) { // Création des OPTION var element = document.createElement('option'); element.setAttribute('value',''+cptPage+''); var text = document.createTextNode(''+cptPage+''); // Ajout du texte dans l'option element.appendChild(text); selectPage.appendChild(element); } // Ajout du select à la seconde cellule de la ligne td_cell_2.appendChild(selectPage); // Mise en forme td_cell_2.style.borderBottom = "none"; td_cell_2.style.textAlign = "center"; // Input taille police var taillePolice = document.createElement('input'); // Type de l'input : text taillePolice.setAttribute('type','text'); // Nom dynamique, en fonction du champ ajouté taillePolice.setAttribute('name','taille_police-'+idChampPost); taillePolice.setAttribute('id','taille_police-'+idChampPost); taillePolice.style.width = "60px"; taillePolice.setAttribute('value','11'); td_cell_3.appendChild(taillePolice); td_cell_3.style.borderBottom = "none"; td_cell_3.style.textAlign = "center"; // [...] // Ajout de la ligne au tableau tr_nouvelle_ligne.appendChild(td_cell_0); tr_nouvelle_ligne.appendChild(td_cell_1); tr_nouvelle_ligne.appendChild(td_cell_2); tr_nouvelle_ligne.appendChild(td_cell_3); tr_nouvelle_ligne.appendChild(td_cell_4); tr_nouvelle_ligne.appendChild(td_cell_5); tr_nouvelle_ligne.appendChild(td_cell_6); tr_nouvelle_ligne.appendChild(td_cell_7); tableau.appendChild(tr_nouvelle_ligne);
Le résultat est bon. Voici un bout du code source généré lorsque j'ajoute le champ ayant l'id "5_1" :
Code:

1 2 3 4 5 6 <td> <input value="11" style="width: 60px;" id="taille_police-5_1" name="taille_police-5_1" type="text"> </td> <td style="border-bottom: medium none; text-align: center;"> <input value="60" style="width: 60px;" id="nb_car_max_par_ligne-5_1" name="nb_car_max_par_ligne-5_1" type="text"> </td>
J'espère que ça va vous aider ! J'ai penser à faire une solution "batarde" en attendant (ça presse), mais bon ... Les systèmes D, c'est jamais bon, surtout quand il s'agit de les maintenir après !

Bonjour,

Je ré-up ce sujet pour préciser que j'ai trouvé la raison de mon problème : l'organisation du code HTML.

En gros, ma balise <form> était à l'intérieure d'une balise <table> :
Code:

1 2 3 4 5 6 7 <table> <form> <tr> ... </tr> </form> </table>
Lorsque la ligne était ajoutée à la table, elle était ajoutée à la balise table (et non pas au form), du coup j'avais dans le DOM :
Code:

1 2 3 4 5 6 7 8 9 <table> <form> <tr> ... </tr> </form>  <tr>...</tr> </table>
Il m'a suffit d'organiser correctement mon code HTML en entourant la table de la balise form plutôt que l'inverse :
Code:

1 2 3 4 5 6 7 <form> <table> <tr> ... </tr> </table> </form>
J'espère que ça en aidera certains !