Discussion :

[mademoizel]

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 :

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

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 :

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

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.

[SpaceFrog]

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

[sekaijin]

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 :

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

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

[Bovino]

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

Code html :

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

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

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

<div id="saisies">

Code html :

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

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

le type reponse n'existe pas pour un input.

Code :

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

saisies.insertAdjacentHTML(...)

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

[javatwister]

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

[SpaceFrog]

Code :

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

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

vain sous IE <8

[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?

[SpaceFrog]

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

[Meyfarth]

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.

[nadox]

Bonjour,

Code :

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

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;

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

[Billy KiT]

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 :

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

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

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

[nadox]

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)

[Meyfarth]

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 :

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
// 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 html :

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

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

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

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

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

1
2
3
4
5
6
7
8
9
<table>
    <form>
        <tr>
        ...
        </tr>
    </form>
    <!-- Nouvelle ligne -->
    <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 html :

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

1
2
3
4
5
6
7
<form>
    <table>
        <tr>
        ...
        </tr>
    </table>
</form>

J'espère que ça en aidera certains !