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