ajouter un champ de saisie dans mon formulaire

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

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.

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

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 :

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

<div id="saisies">

Code html :

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

le type reponse n'existe pas pour un input.

Code :

saisies.insertAdjacentHTML(...)

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

[javatwister]

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>

[SpaceFrog]

Code :

	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]

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.

[nadox]

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;

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

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>";
?>

[nadox]

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)

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

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