cr�ation input file dynamiquement

Version imprimable

10/08/2009, 15h50
knebhi

cr�ation input file dynamiquement

Bonjour,

j'ai cr�� un formulaire et dans ce formulaire j'ai la possibilit� d'uploader des fichiers.

or pour une cat�gorie de fichier j'ai un un fichier par d�faut dont j'indiquerai le chemin par d�faut sur le serveur.
dans une minorit� de cas l'utilisateur va uploader un fichier.

j'ai donc besoin de cr�er une sorte de menu d�roulant avec un choix par d�faut qui serait par exemple : default.doc et une alternative qui serait par exemple : autre et dans ce cas un bouton parcourir viendrai s'afficher.

j'ose imaginer que l'ajout dynamique de fichier se fait par du js.

si vous avez un conseil a me donner ou un post ou tuto qui fait mention de cette probl�matique je suis preneur.

merci de votre aide.
10/08/2009, 15h58
SpaceFrog

Tu peux cr�er dynamiquement un input type file ... mais c'est assez tricky ...
(cf http://www.developpez.net/forums/d53...ynamique-form/)

Mais je pense qu'il serait bien plus simple que l'input soit d�ja sur la page et visibility hidden ou display:none et basculer son style de fa�on � le rendre visible

bien vu spacefrog

j'ai ajout� ce code au formulaire :

Code:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
<tr>
 
				<td align="center">
				<b><i>Convention de transcription :</i></b>
				</td>
				<td>
 
				<input name="convention" type="checkbox" 
			onClick="other_convention()">Autre
 
				</td>
			</tr>
 
			<tbody id="conventionUpload" style="visibility: hidden">
			<tr>
				<td align="center"><b><i>Joindre Convention de Transcription</i></b></td>
				<td bgcolor="white" align="center"><input
					name="convention_transcription" type="file"
					onChange="verif_extensionCONV(this.value);"></td>
			</tr>
			</tbody>

et pour le js qui permet d'afficher le champs :

Code:

1
2
3
4
5
6
7
8
<script language="JavaScript">
 
function other_convention()
{
obj=document.getElementById("conventionUpload").style;
if(document.formulaire.convention.checked==true){obj.visibility='visible';}else{obj.visibility='hidden';}
}
</script>

merci

j'ai une autre question pour am�liorer mon formulaire. j'aimerai en effet pouvoir choisir entre :
- convention par d�faut
- autre

si c'est convention par d�faut qui est choisi rien ne se passe
dans le cas du autre le champ visibility: hidden apparaitra.

je veux donc remplacer les checkbox par des radios

et obtenir quelquechose comme ceci :
Code:

1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 <td> <input name="convention" type="radio" value="TCOFConventionsCommunes_VersionTranscriber2008.doc" >TCOF VersionTranscriber2008 <input name="convention" type="radio" onClick="other_convention()">Autre </td> </tr> <tbody id="conventionUpload" style="visibility: hidden"> <tr> <td align="center"><b><i>Joindre Nouvelle Convention de Transcription</i></b></td> <td bgcolor="white" align="center"><input name="convention_transcription" type="file" onChange="verif_extensionCONV(this.value);"></td> </tr> </tbody>
le code js :
Code:

1 2 3 4 5 6 7 8 <script language="JavaScript"> function other_convention() { obj=document.getElementById("conventionUpload").style; if(document.formulaire.convention.checked==true){obj.visibility='visible';}else{obj.visibility='hidden';} } </script>
j'ai un soucis au niveau du name sachant qu'il doit etre identique dans les checkbox et que mon js ne se r�p�re plus car les deux ont le meme name.

je me r�pond a moi m�me
;-)

alors voici le js :

Code:

1
2
3
4
5
6
<script type="text/javascript">      
function verifie_form(arg)      
{           if(arg==2)           
{                document.getElementById('conventionUpload').style.visibility='visible';           }           
else           {                document.getElementById('conventionUpload').style.visibility='hidden';           }      } 
</script>

et le formulaire associ� :

Code:

1
2
3
4
5
6
7
8
9
<form action="page.php" method="post">
 
<p><label><input type="radio" name="convention" value="1"
	onclick="verifie_form(1)" checked="checked" />Convention par défaut</label></p>
<p><label><input type="radio" name="convention" value="2"
	onclick="verifie_form(2)" />Autre</label></p>
 
<p id="conventionUpload" style="visibility: hidden">Convention à joindre<input type="file"></p>
</form>