Hum, en me relisant, je vois que j'ai dit une petite bêtise dans
mon premier post :
marcv a écrit :
créer déjà ton champ <file> dans le code HTML mais le masquer en CSS (display:none)
Non, il faut le masquer en JS. Si ton utilisateur a JS désactivé, le champ ne sera jamais visible (pas idéal). Donc oublie la balise <style> et ce qu'elle contient (j'ai modifié mes posts prédédents).
Toujours en me relisant, je me rends compte que si tu débutes totalement en JS, le code que je t'ai proposé n'est peut-être pas très compréhensible. Le but étant quand même de comprendre un peu ce qu'on fait
, je l'ai modifié et commenté :
/* On crée un bout de code (une "fonction") auquel */
/* on donne un nom, pour pouvoir y faire référence */
/* plus tard. Cette fonction là vise à rendre ton */
/* <select> sensible aux changements d'état */
function rendSelectSensible() {
/* On indique au script comment trouver le select */
/* dans le document (par son attribut id puisque */
/* tu lui en as donné un), et on lui dit qu'en cas*/
/* d'évènement "change", il doit exécuter le bout */
/* de code (la fonction) nommé afficheCacheInput */
/* Puis on masque l'input file et son label */
document.getElementById("objet").onchange = afficheCacheInput;
document.getElementById("inputFile").style.display = "none";
document.getElementById("inputFileLabel").style.display = "none";
}
/* Cette fonction là a pour objet d'afficher ou de */
/* cacher le <input type="file"> si le select est sur */
/* "demande d'emploi" */
function afficheCacheInput() {
/* Si l'<option> sélectionnée, dans le select, est "job" */
if ( document.getElementById("objet").value == "job" ) {
/* trouve les éléments "inputFile" et "inputFileLabel" */
/* (le champ file ainsi que son label) et applique leur*/
/* le style {display:inline} */
document.getElementById("inputFile").style.display = "inline";
document.getElementById("inputFileLabel").style.display = "inline";
} else { /* Sinon (si l'<option> sélectionnée n'est pas "job") */
/* applique leur le style {display:none} */
document.getElementById("inputFile").style.display = "none";
document.getElementById("inputFileLabel").style.display = "none";
}
}
/* Lorsque le navigateur va lire la page web et arriver ici, */
/* il n'aura pas encore créé le select et l'input file. (on est*/
/* encore dans le <head> de la page web). Il faut donc lui dire*/
/* d'éxécuter ton script seulement une fois que la page est */
/* chargée (évenement "load"). */
window.onload = rendSelectSensible;
Ça paraît un gros paquet comme ça mais si tu vires les commentaires (tout ce qui est entre "/*" et "*/"), c'est tout petit :
function rendSelectSensible() {
document.getElementById("objet").onchange = afficheCacheInput;
document.getElementById("inputFile").style.display = "none";
document.getElementById("inputFileLabel").style.display = "none";
}
function afficheCacheInput() {
if ( document.getElementById("objet").value == "job" ) {
document.getElementById("inputFile").style.display = "inline";
document.getElementById("inputFileLabel").style.display = "inline";
} else {
document.getElementById("inputFile").style.display = "none";
document.getElementById("inputFileLabel").style.display = "none";
}
}
window.onload = rendSelectSensible;
A+
Modifié par marcv (07 Jun 2007 - 09:53)
Je ne l'avais pas mis à l'origine ne sachant pas (1) si ton window.onload était déjà occupé (2) si tu utilisais plus un truc style onDOMReady, mais bon, tu nous diras si c'est le cas.
, entièrement raison, les instructions de mes blocs étaient complètement incohérentes!! Je vais rectifier ça, et mettre en pratique le conseil d'arnaultp. Merci à vous 2!
Si qq'un a la solution...
essai avec cela pour me dire si c'est comme cela que tu le voulais.