Se connecter / S'enregistrer
Votre question

[javascript]Créer un formulaire dynamique

Tags :
  • Select
  • Programmation
Dernière réponse : dans Programmation
11 Mars 2006 12:31:58

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
  1. <p id="lesLiens">
  2. Type de lien: <select name="typeDeLien_1">
  3. <option value="normal">normal</option>
  4. <option value="externe">lien vers un autre site</option>
  5. <option value="index">lien vers la page d'accueil</option>
  6. </select>
  7. <label> nom :<input type="text" name="nom_1" /></label>
  8. <input type="button" value="ajouter une zone de saisie" onClick="javascript:nouveau()" />
  9.  
  10.  
  11. </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:
  1. <p id="lesLiens">
  2. Type de lien: <select name="typeDeLien_1">
  3. <option value="normal">normal</option>
  4. <option value="externe">lien vers un autre site</option>
  5. <option value="index">lien vers la page d'accueil</option>
  6. </select>
  7. <label> url :<input type="text" name="url_1" /></label>
  8. <label> nom :<input type="text" name="nom_1" /></label>
  9. <input type="button" value="ajouter une zone de saisie" onClick="javascript:nouveau()" />
  10.  
  11.  
  12. </p>
[/size]
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é.

Autres pages sur : javascript creer formulaire dynamique

12 Mars 2006 00:41:42

Salut bon je t ais fait un truc à l arrache pour te donner une idée du fonctionnement de quelques fonctions voila la fin de ta page test.htm

au faite il manquais les extensions sur tes liens heureusement que ton répertoire n est pas protégé contre le listage

et la prochaine fois mais des liens avec le bouton url!!!!

  1. function ShowUrlField()
  2. {
  3. if(document.formulaire.typeDeLien_1.value == "externe")
  4. {
  5. document.formulaire.url_1.style.visibility = "visible";
  6. }
  7. else
  8. document.formulaire.url_1.style.visibility = "hidden";
  9. }
  10. </script>
  11. </head>
  12. <body onload="ShowUrlField()">
  13. <form action="#" method="post" name="formulaire">
  14. <p id="lesLiens">
  15. Type de lien: <select name="typeDeLien_1" onChange="ShowUrlField()">
  16. <option value="normal">normal</option>
  17. <option value="externe" >lien vers un autre site</option>
  18. <option value="index">lien vers la page d'accueil</option>
  19. </select>
  20. <label> url du lien: <input type="text" style="visibility:visible" name="url_1" /></label>
  21. <label> nom du lien: <input type="text" name="nomDuLien_1" /></label> <input type="button" value="ajouter un lien" onClick="javascript:nouveaulien()" />
  22.  
  23. </p>
  24. </form>
  25. </body>
  26. </html>
12 Mars 2006 11:32:08

merci de ta réponse mais il y a 2 probleme:
-seule la zone de saisie disparait, pas le texte "url: "
j'ai essayé de déplacé les attributs style="visibility:visible" et name="url_1" sur le label
mais ca ne fonctionne pas.
-même caché, la zone prend tout de même de la place sur l'ecran. Mais ce n'est qu'un détail.

j'ai ressu sur un autre forum une fonction similaire utilisant "display:none"(testez la ici)qui semble plus approrié. le probleme avec cette fonction se trouve lorsque je veu ajouter une nouvelle ligne de formulaire dynamiquement:
commemt attacher la fonction onchange="declic(this,document.getElementById('adresse'))"
à la balise "select"?

j'imagine qu'il serait possible de faire un mixe des deux fonction.
au cas ou, voici celle dont je parlait:
  1. <select name="typeDeLien_1" onchange="declic(this,document.getElementById
  2.  
  3. ('adresse'))">
  4. <option value="un">un</option>
  5. <option value="externe">deux</option>
  6. <option>trois</option>
  7. </select>
  8.  
  9. <p id="adresse" style="display:none">
  10. <label> url : <input type="text" name="url_1" /></label>
  11. </p>
  12.  
  13. <p>
  14. <label> nom : <input type="text" name="nom_1" /></label>
  15. </p>
  16.  
  17. </div>
  18. </form>
  19.  
  20. <script type="text/javascript">
  21.  
  22. function declic(s,adr){
  23. adr.style.display = s.value=="externe" ? "block" : "none";
  24. }
  25.  
  26. </script>
13 Mars 2006 14:11:22

j'ai fini par réunir l'ajout dynamique de ligne et l'apparition/disparition de la zone de saisie comme ceci:
  1. //voici la fonction appellée par le changement d'option dans la liste
  2. function declic(num){
  3. var adr = document.getElementById('adresse_'+num);
  4. var liste = document.getElementById('typeDeLien_'+num);
  5. adr.style.display = liste.value=="externe" ? "inline" : "none";
  6. }
  7. /*beaucoup plus loin,
  8. au millieu de la fonction ajoutant une ligne au formulaire,
  9. voici la creation de la zone de saisie qui doit pouvoir
  10. disparraître et apparaître à volonté*/
  11. var span = document.createElement("span");
  12. span.setAttribute("id","adresse_"+numero);
  13. span.setAttribute("style","display:none");
  14. var valeurspan = document.createTextNode(" addresse de la page: ");
  15. var input = document.createElement("input");
  16. input.setAttribute("type","text");
  17. input.setAttribute("name","url_"+numero);
  18. span.appendChild(valeurspan);
  19. span.appendChild(input);
  20. //puis la création de la liste deroulante (je ne montre qu'une partie)
  21. var liste = document.createElement("select");
  22. liste.setAttribute("name","typeDeLien_"+numero);
  23. liste.setAttribute("id","typeDeLien_"+numero);
  24. liste.setAttribute("onchange","declic("+numero+")");
  25.  
  26. //et enfin, le code html
  27. <p id="lesLiens">
  28. Type de lien: <select name="typeDeLien_1" id="typeDeLien_1" onchange="declic(1)">
  29. <option value="normal">normal</option>
  30. <option value="externe">lien vers un autre site</option>
  31. <option value="index">lien vers la page d'accueil</option>
  32. </select>
  33. <span id="adresse_1" style="display:none">adresse du site : <input type="text" name="url_1" />
  34. </span>
  35. <label> nom du lien: <input type="text" name="nomDuLien_1" />
  36. </label>
  37. <input type="button" value="ajouter un lien" onClick="javascript:nouveaulien()" />
  38.  
  39.  
  40. </p>

ce code fonctionne très bien sous firefox, mais sur IE
le bloc devant être invisible ne l'est pas.
Tom's guide dans le monde
  • Allemagne
  • Italie
  • Irlande
  • Royaume Uni
  • Etats Unis
Suivre Tom's Guide
Inscrivez-vous à la Newsletter
  • ajouter à twitter
  • ajouter à facebook
  • ajouter un flux RSS