[Javascript / DOM (?)] Renommer un element de formulaire

Renommer un element de formulaire [Javascript / DOM (?)] - HTML/CSS - Programmation

Marsh Posté le 15-06-2006 à 09:28:50    

Salut à tous !
 
Je suis en train de faire un code en javascript, qui sur une page html récupère le premier fils d'une balise <fieldset>, et en crée une copie à la fin de cette même balise...
 
Seulement, vu que ces entrées doivent etre récupérées dans un formulaire, j'aimerais pouvoir changer le nom des input ou select que je copie, sinon je ne peux récupérer les infos de la derniere copie que j'ai effectuée seulement..
 
Brefle, voila le code, si des âmes charitables sont prêtes à me donner un petit conseil... Merci d'avance ;)
 
Les fonctions JS :

Code :
  1. echo '<script type="text/javascript">
  2. nbcases=1;
  3. function addDiplome(id)
  4. {
  5. var diplome = document.getElementById("fs"+id).cloneNode(true);
  6. document.getElementById("formation" ).appendChild(diplome);
  7. nbcases=nbcases+1;
  8. }
  10. function delDiplome()
  11. {
  12.   if(nbcases!=1)
  13.   {
  14.     formation.removeChild(formation.lastChild);
  15.     nbcases=nbcases-1;
  16.   }
  17. }
  18. </script>';


 
Le formulaire à proprement parler :

Code :
  1. echo "<fieldset id='formation' style='height: auto;'><legend>Formation :</legend>";
  2. echo "<a href=\"javascript:addDiplome('0');\">[Ajouter un diplome]</a>&nbsp;-&nbsp;<a href=\"javascript:delDiplome();\">[Supprimer le dernier diplome]</a>";
  3. //Liste déroulante des formations, des diplôme et année du diplôme
  4. echo "<fieldset id='fs0'><label>Type de formation : </label>";
  5. echo "<select name='type_formation'>";
  6. echo "<option value='-1'>Inconnu/Autre";
  7. echo "<option value='0'>Initiale";
  8. echo "<option value='1'>Continue";
  9. echo "</select><br />";
  10. echo "<label>Diplôme :</label>";
  11. echo "<select name='diplome_lib'>";
  12. echo "<option>...</option>";
  13. echo "<option>...</option>";
  14. echo "<option>...</option>";
  15. echo "<option>...</option>";
  16. echo "<option>...</option>";
  17. echo "<option>...</option>";
  18. echo "<option>...</option>";
  19. echo "<option>...</option>";
  20. echo "<option>...</option>";
  21. echo "<option>...</option>";
  22. echo "</select><br />";
  23. echo "<label>Année d'obtention du diplôme :</label><input type='text' name='annee' size='4' maxlength='4' value='".$diplome_annee."'><br /></fieldset>";
  24. echo "</fieldset><br />";


 
PS : Les value des options sont manquantes, c'est normal...
Le fieldset à copier est donc 'fs0', et il est toujours rajouté à la fin de 'formation'
Il me faudrait donc le renommer en fs1, fs2, ainsi de suite.. et renommer les input et select contenus en type_formation+id par exemple.
 
J'ai essayé des getElementByName("type_formation" ).name="xxx"; mais ça ne passe pas... Idem avec .nodeName .. je n'arrive pas vraiment à trouver d'exemple ou de tutorial sur ça.
 
N'hésitez pas à me dire si c'est sérieusement crade ou pas comme code... C'est mon premier essai seulement  :hello:
 
Edit 2 : La variable id ne sert pas à grand chose pour le moment, je l'ai gardée depuis quelque modifications où elle servait à quelque chose.. :jap:


Message édité par Eldrik le 15-06-2006 à 09:41:21
Reply

Marsh Posté le 15-06-2006 à 09:28:50   

Reply

Marsh Posté le 15-06-2006 à 10:30:37    

ouais, hyper crade ;)
 
J'ai pas très bien compris le problème, en fait, c'est un poil confu.
 
J'ai l'impression que tu veux faire une sorte de liste de diplomes, avec des boutons pour ajouter/supprimer des diplomes en JS.
 
Dans ce cas, plutôt que de copier/coller un diplôme existant, pourquoi pas ajouter un diplome vide, avec les champs qui faut, puis le remplir avec des valeurs par défaut? Les valeurs par défaut peuvent être prisent dans un autre diplome, ou fixées au départ.
 
Petite remarque en passant: dans le CSS height:auto ne sert pas à grand chose, si?
 
Edit: essaye: element.innerHTML='du html ici';


Message édité par nargy le 15-06-2006 à 10:33:03
Reply

Marsh Posté le 15-06-2006 à 11:34:01    

Hello, c'est ça pour l'idée - je gère des étudiants qui passent un diplome ou plus, et ce serait le formulaire de saisie pour lui en rajouter ou lui en supprimer...
Si j'avais pu copier / coller la partie existante et changer le name ça aurait été pratique et rapide :)
 
Je comprends pas vraiment; quand tu dis plutot que de copier/coller un diplome existant... Le code donnée plus haut ne me copie pas les choix déja faits, simplement la structure?
 
Le height: auto; ne sert à rien en effet, c'est encore un reste qui n'a rien à faire là...
 
Je vais nettoyer toute cette maÿrde et voir le element.innerHTML qui a l'air bien intéréssant ;)
 
Merci pour les infos !

Reply

Marsh Posté le 15-06-2006 à 11:41:15    

J'ai l'impression que tu fais ça avec PHP.
P'tit indication: ne perd pas patience sur l'imbrication de HTML dans du javascript dans du HTML dans du PHP... enfin, tu va comprendre, joue un peu avec addslahes() et htmlentities().
 
Sinon, ouais c'est une sorte de copier/coller que tu faisait.
 
Autre petite remarque: tu as deux tags par diplôme, <fieldset> et <br>, ce qui fait que je ne suis pas sûr que ta fonction JS qui removeLastChild() fonctionne parfaitement...

Reply

Marsh Posté le 15-06-2006 à 11:47:47    

Hop, voila à quoi ça ressemble, seul souci est qu'il manque donc le renommage des champs, et donc probleme lors du POST :
http://img92.imageshack.us/img92/6165/diplome1tv.th.jpg
 
Non, je perds pas patience ;)
 
Et le removeLastChild() passe en effet sous fofox et non sous IE... Je vais voir cette balise :jap:

Reply

Marsh Posté le 15-06-2006 à 11:49:44    

il me semble qu'en utilisant le CSS:
clear: both;
tu peut éviter le <br>

Reply

Sujets relatifs:

Leave a Replay

Make sure you enter the(*)required information where indicate.HTML code is not allowed