Afficher/cacher zone de texte sur liste déroulante

onchange

Sujet résolu

27 février 2009 à 21:32:45

Bonjour,

Je galère sur mon script.

<form method="get" action="validation_traitement.php">
<select name="action" onchange="refusMotif()">
<option value="1">Valider</option>
<option value="2">Refuser</option>
</select>
<input type="text" name="refus_motif" value="Motif" />
<input type="submit" name="ok" value="Ok" />
</form>

Lorsque que l'on choisi "Refuser" donc de valeur 2 on affiche la zone de texte "refus_motif", sinon on la cache. C'est une histoire de style.visibility ça je sais mais la condition je n'arrive pas à la faire.

Merci par avance.

http://chez-syl.fr/

gp2mv3

27 février 2009 à 22:24:41

Salut,
Tu dois d'abord définir des id aux différents champs.
Quand c'est fait tu dois faire ça :

if (document.getElementById('id_champ').value == 2)
{
   document.getElementById("refus_motif").style.visibility = "visible";
}

Normalement ça marchera.

Desolation

28 février 2009 à 11:19:02

Merci mais j'ai ce message d'erreur (Firebug) :
document.getElementById("liste") is null

<script language='javascript'>
function refusMotif()
{
if (document.getElementById('liste').value == 2)
{
   document.getElementById("refus_motif").style.visibility = "visible";
}
}
</script> 
<form method="get" action="">
<select name="liste" onchange="refusMotif()">
<option value="1">Valider</option>
<option value="2">Refuser</option>
</select>
<input type="text" name="refus_motif" value="Motif" style="display:none;"/>
<input type="submit" name="ok" value="Ok" />
</form>

Donc ça marche pas, une idée ?

http://chez-syl.fr/

gp2mv3

28 février 2009 à 11:20:52

Tu dois mettre tes balises script après, si non, il y a un problème, j'ai pas compris pourquoi mais j'ai souvent le même problème...

Anonyme

28 février 2009 à 11:39:42

getElementById

Ton champ n'as pas d'id, juste un "name"…

( edit ) et c'est display qu'il faut changer, pas visibility. vu que dans l'attribut style du html c'est display:none;

gp2mv3

28 février 2009 à 11:40:45

Ha oui, aussi pourtant je t'ai dit d'ajouter des ID.

Anonyme

28 février 2009 à 11:44:38

pour le coup du script après le formulaire pour que getElementById ne merde pas (et les modifications du DOM en général) c'est que le chargement de la page est séquentiel.

Tout ce qui est AVANT <script> est plus ou moins chargé et donc disponible à la modification. Si Tu accède à un élement déclaré après <script> le navigateur execute le javascript avant d'avoir l'élement à disposition, donc ça plante.

D'où l'importance – entre autre – de placer tous ses <script> juste avant </body> en toute fin de page et non pas dans le <head> ou n'importe ou dans le HTML.

gp2mv3

28 février 2009 à 11:57:35

Ha ok, j'ai toujours mis les scripts après le reste mais je savais pas trop pourquoi ça déconnait...

Desolation

28 février 2009 à 12:07:29

Merci de votre aide.

Voici le code qui à présent, fonctionne bien :

<script language='javascript'>
function refusMotif() {
if(document.getElementById('liste').value == 2) {
document.getElementById("refus_motif").style.display = "inline";
} else {
document.getElementById("refus_motif").style.display = "none";
}
}
</script> 
<form method="get" action="">
<select name="liste" id="liste" onchange="refusMotif()">
<option value="1" selected="selected">Valider</option>
<option value="2">Refuser</option>
</select>
<input type="text" name="refus_motif" id="refus_motif" value="Motif" style="display:none;"/>
<input type="submit" name="ok" value="Ok" />
</form>

http://chez-syl.fr/