creation input en javascript

bonjour a tous,

J'aimerai rendre dynamique le formulaire ci-dessous :

Code:

---

1 2 3 4 5 6 7 8 9 10 11 12

<?php echo "Dernière étape : Insertion des photos <br>" ; echo "Pour améliorer l'affichage de votre fiche conseil, vous pouvez inserer des photos" ; echo "<form method='POST' action='etape4.php' name='upload_photo'> <table> <tr> <td>Insérer une photo : </td><td><input type='file' name='photo'></td> </tr> </table> <input type='submit' name='envoyer' value='VALIDER'> </form> " ; ?>

---

Je m'explique, je souhaite pourvoir creer des autres inputs, je suppose que le javascript est le mieux adapté.
Pour le moment, il y a un input par defaut, l'admin du site, si'l le souhaite, peut uploader 5 photos, pour cela il faudrait creer 4 inputs dynamiquement mais je ne sais pas comment m'y prendre.

est ce que quelqu'unpourrait-il m'aider??

Merci d'avance.

Cordialement

http://www.developpez.net/forums/d53...ynamique-form/

Salut,

Côté JavaScript tu peux faire un truc du genre :

Code:

---

1 2 3 4 5 6 7 8 9 10

var form = document.getElementsByTagName("form")[0]; var field = document.createElement("input"); field.type = "file"; field.id = "upload" + index // À toi de générer cet index, par exemple en fonction du nombre de champs "upload". field.name = field.id; var label = document.createElement("label"); label.htmlFor = "upload" + index; label.appendChild(document.createTextNode("Fichier #" + index)); form.appendChild(label); form.appendChild(field);

---

Ce n'est pas tout à fait adapté à ton code HTML mais tu pourras facilement l'adapter. Je voulais juste te donner qq tuyaux, en passant.

Bonne continuation !

sauf que IE n'accepte pas l'attribution dynamique de names aux elements de from ... ce qui est assez genant ...

d'ou le lien donné ci dessus ...

ok ,je vois a peu pres comment je peux faire

Mais une autre question me vient, comment je peux gerer l'integration dans une base de données mysql????

Citation:

---

Envoyé par SpaceFrog

sauf que IE n'accepte pas l'attribution dynamique de names aux elements de from ... ce qui est assez genant ...

d'ou le lien donné ci dessus ...

---

C'est bien étrange ce que tu dis là, ça fait quelques années maintenant que je fais ce genre de choses et je n'ai jamais noté un tel problème.

Par exemple, essaye le petit fragment suivant, tu verras que les champs / valeurs apparaissent bien dans l'URL une fois le formulaire soumis.

Code:

---

1 2 3 4 5 6 7 8 9 10 11 12

<form action="htttp://localhost" method="GET"> <button>submit</button> </form> <script> // prototype.js function addField(name, value) { var field = new Element("input", { "name": name, "value": value }); $$("form")[0].appendChild(field); </script>

---

(Internet Explorer 7)

tu utilises prototype ....
je parlais de

Code:

---

document.createElement('input')

---

Element ... ????

à mon avis si tu epluches le code de prototype tu verras qu'il fait

Code:

---

document.createElement('<input type="text" name="'+lenom+'" >')

---

ou un truc du genre

Grand bien m'y fasse, oui, j'utilise prototype.js ! ;)

Tiens, essaye ça, ça marche de la même manière (testé avec IE 7) :

Code:

---

1 2 3

var field = document.createElement("input"); field.name = name; field.value = value;

---

P.S. : Dans prototype.js on trouve effectivement une p'tite bidouille pour cet attribut "name" : c'est sans doute pour une version d'Internet Explorer < 7 (je n'ai pas testé, je ne peux plus installer IE < 7). Bon courage à tous ceux qui sont obligés de produire de code pour répondre à ce besoin ! :aie:

tu arrives bien a créer l'element ...

mais arrives tu à en recuperer le post coté serveur ???

Je n'ai pas testé mais il me semble qu'avec une telle URL on s'y retrouve : "htttp://localhost/?toc=tac".

Code:

---

1 2	// PHP $_GET['toc'] // "tac"

---

Que la méthode de soumission soit "get" ou "post" ça ne fera pas grande différence.

en GET peut être ...
as tu essayé en POST ?

bonjour a tous,

J'ai un formulaire avec un input :

Code:

---

1 2 3 4 5

<form method='POST' action='upload.php' name='upload'> <input type='hidden' size='MAX_FILE_SIZE' value='100000' > <input type='file' name='photo1' > <input type='submit' name='upload' value='Uploader'> </form>

---

Je souhaite creer en javascript une fonction qui me permet de creer d'autre input via un bouton ou un texte.

j'essai de faire ma fonction en javascript mais je n'y arrive pas. Est ce que quelqu'un pourrait-il m'aider??

J'ai regardé la doc que vous avez mis mais j'ai un peu de mal.

voilà la fonction que j'ai reussi a faire mais je galere:

Code:

---

1 2 3 4 5 6

function creerInput() { creerInput.createElement("input") ; creerInput.type="file" ; creerInput.name="photo2" ; }

---

merci d'avance

Cordialement

leclone tout est ecrit dans l'article dans les contributions ...

Si je peux me permettre, je comprends pas grand chose du code dans les contributions.

Je n'est quasiment jamais fais de JS a part pour la verificatrion de données d'un formulaire

Code:

---

1 2 3 4 5 6

function creerInput() { creerInput.createElement("input"); creerInput.type="file"; creerInput.name="photo2" ; }

---

Je ne sais absolument rien faire.

re,


Voici ma fonction Ajouter qui me permet de creer des input de type file :

Code:

---

1 2 3 4 5 6 7 8 9 10 11 12 13 14 15

<head> <title>Page sans titre</title> <script> var nlignes = 1; function Ajouter(){ nlignes++; saisies.insertAdjacentHTML('BeforeEnd','<br>Fichier n°'+nlignes+' <input type=file name=P'+nlignes+'>'); }; </script> </head> <body> <form method="POST" action="upload.php" name="upload"> <Input Type="Button" Value="Ajouter une ligne" OnClick="Ajouter()"> <div id='saisies'>Fichier n°1 <input type=file size=4 name=P1><div/> </Form>

---

Cela fonctionne nickel.

merci a tous

Ciao

si je puis me permettre ...

insertAdjacentHTML beuark !!!!

il est plus que déconseillé d'ajouter des éléments en innerHTML car le DOM risque de ne pas les reconnaitre selon les navigateurs ...

Au pire

Code:

---

1 2 3 4 5 6 7 8 9 10 11 12

function creerInput() { if (document.all){ creerInput=document.createElement('<input type="file" name="photo2" />'); } else{ creerInput=document.createElement("input"); creerInput.type="file"; creerInput.name="photo2" ; } }

---