Discussion :

[leclone]

bonjour a tous,

J'aimerai rendre dynamique le formulaire ci-dessous :

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

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

[SpaceFrog]

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

[Oscar Hiboux]

Salut,

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

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

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 !

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

[leclone]

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

[Oscar Hiboux]

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 :

Sélectionner tout - Visualiser dans une fenêtre à part

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)

[SpaceFrog]

tu utilises prototype ....
je parlais de

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

document.createElement('input')

Element ... ????

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

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

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

ou un truc du genre

[Oscar Hiboux]

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 :

Sélectionner tout - Visualiser dans une fenêtre à part

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 !

[SpaceFrog]

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

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

[Oscar Hiboux]

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

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

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

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

[SpaceFrog]

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

[leclone]

bonjour a tous,

J'ai un formulaire avec un input :

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

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 :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
6
function creerInput()
{
creerInput.createElement("input") ;
creerInput.type="file" ;
creerInput.name="photo2" ;
}

merci d'avance

Cordialement

[SpaceFrog]

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

[leclone]

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 :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
6
function creerInput()
{
creerInput.createElement("input");
creerInput.type="file";
creerInput.name="photo2" ;
}

Je ne sais absolument rien faire.

[leclone]

re,


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

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

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

[SpaceFrog]

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 :

Sélectionner tout - Visualiser dans une fenêtre à part

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" ;
}
}