Créer un formulaire dynamique

Version imprimable

11/03/2006, 12h21
pomgnon

Créer un formulaire dynamique

bonjour,
j'avais besoin d'un formulaire dynamique où l'on pouvait ajouter ou suppirmer une zone de saisie en cliquant sur le bouton adéquat.
Etant très mauvais en javascript, j'ai adapté un code faisant à peu près la même chose à mon site.
Je me rend compte maintenant que je doit ajouter un autre element dans se formulaire, lui aussi interactif. J'ai essayé d'écrire le code mais je n'y arrive pas. Je demande donc votre aide.
tout d'abord voici le code (xhtml et js) que j'utilise pour l'instant.
xhtml
<p id="lesLiens">
Type de lien: <select name="typeDeLien_1">
<option value="normal">normal</option>
<option value="externe">lien vers un autre site</option>
<option value="index">lien vers la page d'accueil</option>
</select>
<label> nom :<input type="text" name="nom_1" /></label>
<input type="button" value="ajouter une zone de saisie" onClick="javascript:nouveau()" />
<br />
</p>
javascript: le code est assez gros donc je le mets à disposition sur cette page: http://www.twallet.be/test/code
ce code fonctionne et pour que vous puissiez y voir plus clair voici une page ou se trouve ce petit formulaire: http://www.twallet.be/test/test
J'aimerais que lorsque l'on selectionne sur la deuxieme option de la liste deroulante, une nouvelle zone de saisie apparaisse entre la liste deroulante et la premiere zone de saisie.
ce qui donnerais ce code:
<p id="lesLiens">
Type de lien: <select name="typeDeLien_1">
<option value="normal">normal</option>
<option value="externe">lien vers un autre site</option>
<option value="index">lien vers la page d'accueil</option>
</select>
<label> url :<input type="text" name="url_1" /></label>
<label> nom :<input type="text" name="nom_1" /></label>
<input type="button" value="ajouter une zone de saisie" onClick="javascript:nouveau()" />
<br />
</p>
idéalement, losrque l'on enleverais le focus à la 2eme option , cette zone de saisie disparaitrais, mais ceci est facultatif.
le probleme est qu'il faut que cela fonctionne quelque soit le nombre de ligne qu'il y ait.
je pense avoir tout dit.
Je sais que je demande beaucoup mais si quelqu'un acceptait d'ecrire ce code je lui en serais très reconnaissant.
merci d'avance.

conseil: si vous décider de vous attaquer à ce probleme, vous aurez sans doute besoin de travailler sur le code que j'ai donné plus haut (a moin que vous decidiez de tout reécrire mais je ne pense pas que ce soit utile). pour faciliter la lecture de ce code je vous conseil d'en faire un copier coller dans votre editeur de texte preferé.

très schématiquement, ça peut donner ça:

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
<form id="f" action="">
<div>
 
<select name="typeDeLien_1" onchange="declic(this,document.getElementById
 
('adresse'))"> 
<option value="un">un</option>
<option value="externe">deux</option>
<option>trois</option>
</select>
 
<p id="adresse" style="display:none">
<label> url : <input type="text" name="url_1" /></label> 
</p>
 
<p>
<label> nom : <input type="text" name="nom_1" /></label> 
</p>
 
</div>
</form>
 
<script type="text/javascript"> 
 
function declic(s,adr){
adr.style.display = s.value=="externe" ? "block" : "none";
}
 
</script>

merci pour ta reponse mais je ne comprend pas bien très bien comment cela fonctionne (je le repete je suis très mauvais en js). De plus, je ne connais pas le fonctionnement des condition ternaire (même si je sait en reconnaître une).

je travaillais de mon côté à ce codeet j'ai remarqué que j'ai un probleme pour créer une balise appelant une fonction javascript.
voici mon code:
Code:

1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 //là je tente d'attacher cette fontion à mon option var option2 = document.createElement("option"); option2.setAttribute("value","externe"); if(document.all) option2.attachEvent("onfocus",url); else option2.addEventListener("focus",url,true); if(document.all) option2.attachEvent("onblur",delurl); else option2.addEventListener("blur",delurl,true); var texteoption2 = document.createTextNode("lien vers un autre site"); option2.appendChild(texteoption2); //j'attache le tout à la liste deroulante liste.appendChild(option2); //et voici la fonction url() qui est censé être appelée par l'option function url(event) { //je mets une action visible pour tester var bloc_liens = document.getElementById("lesLiens"); document.removeChild(bloc_liens); }
bien sur, rien ne se passe...

une derniere chose: j'ai du mal à comprendre ce qui ce passe dans ce bout de code:
Code:

1 2 var node_source = (document.all)?event.srcElement:event.target;

11/03/2006, 19h47
javatwister

nan mais sans vouloir te commander, copie le code dans une page et tu verras comment il marche;
t'as juste à ajouter les balises html, head et body...
11/03/2006, 20h31
pomgnon

effectivement cela marche.
mais comment faire pour pour attacher onchange="declic(this,document.getElementById('adresse'))"
au select lorsque l'on ajoute une nouvelle ligne?

j'ai fini par réunir l'ajout dynamique de ligne et l'apparition/disparition de la zone de saisie comme ceci:

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
//voici la fonction appellée par le changement d'option dans la liste
function declic(num){
var adr = document.getElementById('adresse_'+num);
var liste = document.getElementById('typeDeLien_'+num);
adr.style.display = liste.value=="externe" ? "inline" : "none";
}
/*beaucoup plus loin, 
au millieu de la fonction ajoutant une ligne au formulaire, 
voici la creation de la zone de saisie qui doit pouvoir
 disparraître et apparaître à volonté*/
var span = document.createElement("span");
	span.setAttribute("id","adresse_"+numero);
	span.setAttribute("style","display:none");
	var valeurspan =  document.createTextNode(" addresse de la page: ");
	var input = document.createElement("input");
	input.setAttribute("type","text");
	input.setAttribute("name","url_"+numero);
	span.appendChild(valeurspan);
	span.appendChild(input);
//puis la création de la liste deroulante (je ne montre qu'une partie)
var liste = document.createElement("select");
	liste.setAttribute("name","typeDeLien_"+numero);
	liste.setAttribute("id","typeDeLien_"+numero);
	liste.setAttribute("onchange","declic("+numero+")");
 
//et enfin, le code html
<p id="lesLiens">
   Type de lien: <select name="typeDeLien_1" id="typeDeLien_1" onchange="declic(1)">
	<option value="normal">normal</option>
	<option value="externe">lien vers un autre site</option>
	<option value="index">lien vers la page d'accueil</option>
   </select>
<span id="adresse_1" style="display:none">adresse du site : <input type="text" name="url_1" />
</span>
<label> nom du lien: <input type="text" name="nomDuLien_1" />
</label>
<input type="button" value="ajouter un lien" onClick="javascript:nouveaulien()" />
<br />
</p>

ce code fonctionne très bien sous firefox, mais sur IE
le bloc devant être invisible ne l'est pas.