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

Recherche :

Mot : Pseudo : Filtrer
Bas de page
Auteur	Sujet : [RESOLU][Javascript] Mise en page compliquée :)

micfont999

Simplement Moi

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 :

var nbrs = 2; // Nombre d'élements ajouter;
var nb = 2; // Nombre d'élements ajouter;
var lie = 2; // Nombre d'élements ajouter;
function ajouter(frm) { // ajout d'élement dans le formulaire
var TD0 = document.createTextNode(nbrs+"ème Photo .. " );
frm.appendChild(TD0);
var TD1 = document.createElement("input" );
TD1.setAttribute("name","monfichier"+nbrs);
TD1.setAttribute("type","file" );
TD1.setAttribute("size","24" );
frm.appendChild(TD1);
var TD2 = document.createElement("br" );
frm.appendChild(TD2);
nbrs++;
}
function ajouterfichier(frm) { // ajout d'élement dans le formulaire
var f0 = document.createTextNode(nb+"ème fichier .. " );
frm.appendChild(f0);
var f1 = document.createElement("input" );
f1.setAttribute("name","fichier"+nb);
f1.setAttribute("type","file" );
f1.setAttribute("size","24" );
frm.appendChild(f1);
var f2 = document.createElement("br" );
frm.appendChild(f2);
nb++;
}
function ajouterlien(frm) { // ajout d'élement dans le formulaire
var l0 = document.createTextNode(lie+"ème lien .. " );
frm.appendChild(l0);
var l1 = document.createElement("input" );
l1.setAttribute("name","lien"+lie);
l1.setAttribute("type","text" );
l1.setAttribute("size","24" );
frm.appendChild(l1);
var l2 = document.createElement("br" );
frm.appendChild(l2);
lie++;
}

code dans le <html>

Code :

<form name="formulaire" method="post" action="#">
<input type="hidden" name="MAX_FILE_SIZE" value="8000000" />
<tr><td>Intitulé : </td><td><input type="text" name="intitule" size="20"></td></tr>
<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>
<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>
<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>
<tr><td></td><td><input type="submit" name="Submit" value="..:: Valider le formulaire ::.. "><tr><td>
<input type="hidden" name="nbr" value="1">
<br>
</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

Publicité

afbilou

pouet your life

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

afbilou

pouet your life

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

Code :

function appendAfter(elt , new_elt)
{
var frere = elt.nextSibling;
var pere = elt.parentNode;
pere.insertBefore(new_elt , frere);
}
function appendBefore(elt , new_elt)
{
var pere = elt.parentNode;
pere.insertBefore(new_elt , elt);
}

micfont999

Simplement Moi

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.. J'espère qu'on trouvera la solution, Merki d'avance...

micfont999

Simplement Moi

oki je vais regarder ça... merci beaucoup

micfont999

Simplement Moi

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

afbilou

pouet your life

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

micfont999

Simplement Moi

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 :

function ajouter(frm) { // ajout d'élement dans le formulaire
var TD0 = document.createTextNode(nbrs+"ème Photo .. " );
frm.appendChild(TD0);
var TD1 = document.createElement("input" );
TD1.setAttribute("name","monfichier"+nbrs);
TD1.setAttribute("type","file" );
TD1.setAttribute("size","24" );
// frm.appendChild(TD1); >> plus de ça
frm.appendAfter(v1,TD1);
var TD2 = document.createElement("br" );
frm.appendChild(TD2);
nbrs++;
}

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

micfont999

Simplement Moi

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

afbilou

pouet your life

Oula tu fais fausse route ...

Code :

**************
<head>
<script type="text/javascript">
window.onload = function() {
fic = document.getElementById('fic');
fic.onclick = function () {
new_elt = document.createElement(...);
...
appendBefore(fic , new_elt);
}
link = document.getElementById('link');
link.onclick = function () {
new_elt = document.createElement(...);
...
appendBefore(link , new_elt);
}
}
</script>
</head>
**************
<form method="post" action="#">
<input type="file" name="monfichier1" size="35" />
<input type="button" id="fic" value="Ajouter photo" />
<input type="text" name="lien1" id="lien1" size="35" />
<input type="button" id="link" value="Ajouter un lien" />
</form>
**************

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

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

Publicité

micfont999

Simplement Moi

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

afbilou

pouet your life

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

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) - bizarrerie	redirection 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 :)

Page générée en 0.096 secondes