Forum |  HardWare.fr | News | Articles | PC | S'identifier | S'inscrire | Shop Recherche
1285 connectés 

  FORUM HardWare.fr
  Programmation
  HTML/CSS

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

 



 Mot :   Pseudo :  
 
Bas de page
Auteur Sujet :

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

n°1095236
micfont999
Simplement Moi
Posté le 24-05-2005 à 16:39:40  profilanswer
 

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


 
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
mood
Publicité
Posté le 24-05-2005 à 16:39:40  profilanswer
 

n°1095250
afbilou
pouet your life
Posté le 24-05-2005 à 16:47:26  profilanswer
 

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
n°1095260
afbilou
pouet your life
Posté le 24-05-2005 à 16:50:43  profilanswer
 

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;
  5. pere.insertBefore(new_elt , frere);
  6. }
  7. function appendBefore(elt , new_elt)
  8. {
  9. var pere  = elt.parentNode;
  10. pere.insertBefore(new_elt , elt);
  11. }

n°1095263
micfont999
Simplement Moi
Posté le 24-05-2005 à 16:51:23  profilanswer
 

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... :)

n°1095264
micfont999
Simplement Moi
Posté le 24-05-2005 à 16:51:56  profilanswer
 

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

n°1095288
micfont999
Simplement Moi
Posté le 24-05-2005 à 17:02:37  profilanswer
 

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..

n°1095310
afbilou
pouet your life
Posté le 24-05-2005 à 17:10:13  profilanswer
 

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
n°1095322
micfont999
Simplement Moi
Posté le 24-05-2005 à 17:20:54  profilanswer
 

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);
  10. var TD2 = document.createElement("br" );
  11. frm.appendChild(TD2);
  12. nbrs++;
  13. }


 
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

n°1095332
micfont999
Simplement Moi
Posté le 24-05-2005 à 17:29:08  profilanswer
 

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

n°1095339
afbilou
pouet your life
Posté le 24-05-2005 à 17:35:27  profilanswer
 

Oula tu fais fausse route ...
 

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


 
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
mood
Publicité
Posté le 24-05-2005 à 17:35:27  profilanswer
 

n°1095351
micfont999
Simplement Moi
Posté le 24-05-2005 à 17:45:54  profilanswer
 

;) 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

n°1095368
afbilou
pouet your life
Posté le 24-05-2005 à 17:55:19  profilanswer
 

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


Aller à :
Ajouter une réponse
  FORUM HardWare.fr
  Programmation
  HTML/CSS

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

 

Sujets relatifs
Pb javascript, iframe et firefox[Resolu] Récupérer le mois à partir du numero de semaine
[résolu] fonction (mail) - bizarrerieredirection sur la meme page
[php] convertir "maPage" en "ma page"[Javascript] Modifier du texte en cliquant une checkbox
Probleme Iframe et Textarea [Résolu]mise en page dans liste déroulante
requete mysql qui me donne une page blache... 
Plus de sujets relatifs à : [RESOLU][Javascript] Mise en page compliquée :)


Copyright © 1997-2018 Hardware.fr SARL (Signaler un contenu illicite / Données personnelles) / Groupe LDLC / Shop HFR