[RESOLU][Javascript] Mise en page compliquée :)

Mise en page compliquée :) [RESOLU][Javascript] - HTML/CSS - Programmation

Marsh Posté le 24-05-2005 à 16:39:40    

Salut à tous,  
voila mon petit problème, j'ai un code, qui permet dans un formulaire, par l'action d'un bouton, je rajouter des champs de type files, text, etc, etc..
Le seul problème est dans la mise en page.  
En effet, lorsque je rajoute donc un élément, il se met tout en bas de mon formulaire même après le bouton submit.  
 
Est t'il possible dans mes fonctions de définir une sorte d'ancre, où insérer ces éléments?
Par exemple mon formulaire est formé ainsi
 
Intitulé
Photo (+ bouton ajouter nouv photo)
Fichier (+ bouton ajouter nouv fichier)
etc etc..
 
Pour l'instant quand j'insère un nouvel élément ça donne ça
Intitulé
Photo (+ bouton ajouter nouv photo)
Fichier (+ bouton ajouter nouv fichier)
etc etc..
2eme photo
 
et je souhaiterais ceci
 
Intitulé
Photo (+ bouton ajouter nouv photo)
2eme photo
Fichier (+ bouton ajouter nouv fichier)
etc etc..
 
En vous donnant les bouts de codes :) et en vous remerciant d'avance.
 
code dans les balises <script>

Code :
  1. var nbrs = 2; // Nombre d'élements ajouter;
  2. var nb = 2; // Nombre d'élements ajouter;
  3. var lie = 2; // Nombre d'élements ajouter;
  5. function ajouter(frm) { // ajout d'élement dans le formulaire
  6. var TD0 = document.createTextNode(nbrs+"ème Photo .. " );
  7. frm.appendChild(TD0);
  8. var TD1 = document.createElement("input" );
  9. TD1.setAttribute("name","monfichier"+nbrs);
  10. TD1.setAttribute("type","file" );
  11. TD1.setAttribute("size","24" );
  12. frm.appendChild(TD1);
  13. var TD2 = document.createElement("br" );
  14. frm.appendChild(TD2);
  15. nbrs++;
  16. }
  18. function ajouterfichier(frm) { // ajout d'élement dans le formulaire
  19. var f0 = document.createTextNode(nb+"ème fichier .. " );
  20. frm.appendChild(f0);
  21. var f1 = document.createElement("input" );
  22. f1.setAttribute("name","fichier"+nb);
  23. f1.setAttribute("type","file" );
  24. f1.setAttribute("size","24" );
  25. frm.appendChild(f1);
  26. var f2 = document.createElement("br" );
  27. frm.appendChild(f2);
  28. nb++;
  29. }
  31. function ajouterlien(frm) { // ajout d'élement dans le formulaire
  32. var l0 = document.createTextNode(lie+"ème lien .. " );
  33. frm.appendChild(l0);
  34. var l1 = document.createElement("input" );
  35. l1.setAttribute("name","lien"+lie);
  36. l1.setAttribute("type","text" );
  37. l1.setAttribute("size","24" );
  38. frm.appendChild(l1);
  39. var l2 = document.createElement("br" );
  40. frm.appendChild(l2);
  41. lie++;
  42. }


 
code dans le <html>
 

Code :
  1. <form name="formulaire" method="post" action="#">
  2. <input type="hidden" name="MAX_FILE_SIZE" value="8000000" />
  3. <tr><td>Intitulé : </td><td><input type="text" name="intitule" size="20"></td></tr>
  4. <tr><td>Photo : </td><td><input type="file" name="monfichier" id="monfichier1" size="35"> </td><td> > <input type="button" class="boutons" name="Button1" value="Ajouter photo" onClick="ajouter(this.form)"></td></tr>
  5. <tr><td>Fichiers à télécharger : </td><td> <input type="file" name="fichier" id="fichier1" size="35"> </td><td> > <input type="button" class="boutons" name="Button1" value="Ajouter fichier" onClick="ajouterfichier(this.form)"></td></tr>
  6. <tr><td>Liens à insérer : </td><td> <input type="text" name="lien1" id="lien1" size="35"> </td><td> > <input type="button" class="boutons" name="Button1" value="Ajouter un lien" onClick="ajouterlien(this.form)"></td></tr>
  7. <tr><td></td><td><input type="submit" name="Submit" value="..:: Valider le formulaire ::.. "><tr><td>
  8. <input type="hidden" name="nbr" value="1">
  9. <br>
  10. </form>


 
Voila en espérant que cela est possible je vous salus bien bas en vous remerciant d'avance  :jap:  :jap:  :)


Message édité par micfont999 le 24-05-2005 à 17:46:33
Reply

Marsh Posté le 24-05-2005 à 16:39:40   

Reply

Marsh Posté le 24-05-2005 à 16:47:26    

tu ne peux pas ajouter un fils a un <input> puisque c'est une balise "orpheline"


Message édité par afbilou le 24-05-2005 à 16:48:32
Reply

Marsh Posté le 24-05-2005 à 16:50:43    

Utilise ces fonctions pour ajouter un element frere "new_elt" avant ou apres un element "elt"
 

Code :
  1. function appendAfter(elt , new_elt)
  2. {
  3. var frere = elt.nextSibling;
  4. var pere  = elt.parentNode;
  6. pere.insertBefore(new_elt , frere);
  7. }
  9. function appendBefore(elt , new_elt)
  10. {
  11. var pere  = elt.parentNode;
  13. pere.insertBefore(new_elt , elt);
  14. }

Reply

Marsh Posté le 24-05-2005 à 16:51:23    

beuh... et ça ve dire? que c'est pas possible? et en mettant je sais pas un div, ou un truc du style, c'est pas possible, c'est juste une mise en page ça devrais etre possible quand même non.? on peut pas parametre lors du appendchild un nom de div, une ancre un emplacement quelque chose quoi, lol.. :D J'espère qu'on trouvera la solution, Merki d'avance... :)

Reply

Marsh Posté le 24-05-2005 à 16:51:56    

oki je vais regarder ça... ;) merci beaucoup

Reply

Marsh Posté le 24-05-2005 à 17:02:37    

Question comment ça marcherais pour mon code parce que je vois même pas quels parametres je doit insérer...
Ce qu'il faudrais c'est insérer le appendAfter() dans ma fonction ajouter() par exemple, pour etre sur, non..? Désolé de pas tout comprendre, mais autant les autres langages ça va, autant javascript je déconnecte lol... Merci pour tes réponses rapideS..

Reply

Marsh Posté le 24-05-2005 à 17:10:13    

bah new_elt ... c'est l'element que tu cree avec createElement()
 
et elt c'est l'element apres lequel ou avant lequel tu veux attacher new_elt.
 
avant :
 __ truc
|
|__ elt
|
|__ machin
 
apres appendBefore
 
 __ truc
|
|__ new_elt
|
|__ elt
|
|__ machin


Message édité par afbilou le 24-05-2005 à 17:10:38
Reply

Marsh Posté le 24-05-2005 à 17:20:54    

Donc si j'ai bien compris, il faudrais dans mon code html que je mette un javascript en incrémentant une variable v1 par exemple,  
et dans mes balises <script> par exemple je met  
 

Code :
  1. function ajouter(frm) { // ajout d'élement dans le formulaire  
  2. var TD0 = document.createTextNode(nbrs+"ème Photo .. " );
  3. frm.appendChild(TD0);
  4. var TD1 = document.createElement("input" );
  5. TD1.setAttribute("name","monfichier"+nbrs);
  6. TD1.setAttribute("type","file" );
  7. TD1.setAttribute("size","24" );
  8. // frm.appendChild(TD1); >> plus de ça
  9. frm.appendAfter(v1,TD1);
  11. var TD2 = document.createElement("br" );
  12. frm.appendChild(TD2);
  13. nbrs++;
  14. }


 
c'est ça?? j'espère que j'ai compris, lol,ilme restera plus qu'a trouver comment mettre la variable V1 dans le html et ce serais bon ;) merci pour tout, dit moi juste si j'ai bon ou pas. Merci

Reply

Marsh Posté le 24-05-2005 à 17:29:08    

Je viens d'essayé et ça marche pas... Merci de ton aide j'espère que tu saura me donner la solution.. ;)

Reply

Marsh Posté le 24-05-2005 à 17:35:27    

Oula tu fais fausse route ...
 

Code :
  1. **************
  3. <head>
  5. <script type="text/javascript">
  7. window.onload = function() {
  9. fic = document.getElementById('fic');
  11. fic.onclick = function () {
  12.  new_elt = document.createElement(...);
  13.  ...
  14.  appendBefore(fic , new_elt);
  15. }
  17. link = document.getElementById('link');
  19. link.onclick = function () {
  20.  new_elt = document.createElement(...);
  21.  ...
  22.  appendBefore(link , new_elt);
  23. }
  25. }
  27. </script>
  29. </head>
  31. **************
  33. <form method="post" action="#">
  35. <input type="file" name="monfichier1" size="35" />
  37. <input type="button" id="fic" value="Ajouter photo" />
  39. <input type="text" name="lien1" id="lien1" size="35" />
  41. <input type="button" id="link" value="Ajouter un lien" />
  43. </form>
  45. **************


 
Voila en gros ce ke tu dois avoir.
Dans le <head> l'element elt c'est l'element que tu dois creer avec createElement() et qui sera ajouté.
 
edit : bon je t'ai pratikement tout fait la :p


Message édité par afbilou le 24-05-2005 à 17:38:25
Reply

Marsh Posté le 24-05-2005 à 17:35:27   

Reply

Marsh Posté le 24-05-2005 à 17:45:54    

;) Je m'appretais à te dire que ça ne marchais pas, mais j'ai perceveré etttttttt oui, effectivement, après quelques bidouillages, ça fonctionne, je te remercie vraiment beaucoup,... Encore une mission réussie :)
En te remerciant vraiment beaucoup... :D

Reply

Marsh Posté le 24-05-2005 à 17:55:19    

De rien, et en esperant que tu comprennes bien comment tout fonctionne.

Reply

Sujets relatifs:

Leave a Replay

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