Quand on fait u choix dans le menu déroulant à côté un champ de saisie apparait

[ Formulaire ]

Sujet résolu

12 juillet 2006 à 19:53:43

Bonjour,
j'aimerais que quand on clique sur "Autre" dans le menu déroulant un champs de saisie se place automatiquement.

Voici le site :
http://membres.lycos.fr/aurelienn/forumactif/generateur.php

Et le code : (de la partie à modifier seulement)

<div class="dashed">
<fieldset>
<center><img src="http://membres.lycos.fr/aurelienn/images/1ere_etape.png"></center>
<font face="arial"><b><h5>Nature de la commande :</h5></b><select name="choix">
<option value="Une bannière">Bannière</option>
<option value="Un header">Header</option>
<option value="Un logo">Logo</option>
<option value="Un avatar">Avatar</option>
<option value="Une signature">Signature</option>
<option value="Une horloge">Horloge</option>
<option value="Des bouton">Boutons</option>
<option value="Des rangs">Rangs</option>
<option value="Préciser">Autre</option>
</select>
<strong><h5>Taille en pixels :</h5></font></strong><input type="text" name="taille" />
</fieldset>
</div><br><br>

Merci d'avance !

sexyprout

13 juillet 2006 à 9:16:21

Il n'y a personne pour m'aider ?

KinderSurpriZ

13 juillet 2006 à 10:53:49

Bonjour Aurélien !

Pour réaliser ce que tu souhaites, il te faut utiliser l'évenement Javascript onchange, lequel appelle la fonction de ton choix lorsque le contenu d'un champs est modifié.

Appliquons-le à ton cas :

<div class="dashed">
<fieldset>
<center><img src="http://membres.lycos.fr/aurelienn/images/1ere_etape.png"></center>
<font face="arial"><b><h5>Nature de la commande :</h5></b><select name="choix" id="choix" onchange="verifAutre()">
<option value="bann">Bannière</option>
<option value="header">Header</option>
<option value="logo">Logo</option>
<option value="avatar">Avatar</option>
<option value="sign">Signature</option>
<option value="horloge">Horloge</option>
<option value="bouton">Boutons</option>
<option value="rang">Rangs</option>
<option value="0">Autre</option>
</select>
<strong><h5>Taille en pixels :</h5></font></strong><input type="text" name="taille" /><br/>
<input type="text" id="chp_autre" name="chp_autre" style="display:none;" value=""/>
</fieldset>
</div><br><br>

Voilà ! Maintenant lorsque quelqu'un choisi une des options, la fonction Javascript verifAutre() est executée.

On veut que l'option Autre déclenche l'apparition d'un champ de texte pour que le visiteur précise sa requête : la fonction doit donc vérifier si la valeur du select est égale à 0 (value="0" pour Autre). Je me suis permis de modifier les value pour éviter les espaces/accents/majuscules.

Normalement tu devrais pouvoir maintenant réaliser ce que tu voulais ...

sexyprout

13 juillet 2006 à 11:05:24

Merci, mais le code JavaScrip je le met ou ?

KinderSurpriZ

13 juillet 2006 à 11:32:52

Un code Javascript s'insert entre deux balises <script>, lesquelles sont elles-mêmes comprises entre les deux balises <head> de la page XHTML. Comme ceci :

<html>
<head>
<script type='text/javascript'>
//Mon Javascript adoré
</script>
</head>
<body>
Le contenu
</body>
</html>

sexyprout

13 juillet 2006 à 11:50:41

Il n'y a rien qui se passe :
http://generateur-de-commandes.c.la

KinderSurpriZ

13 juillet 2006 à 12:09:16

OUPS !!! Erreur d'inattention (vraiment conne en plus

!) :

Dans le Javascript, remplaces :

document.getElementById('chp_autre').style.display = "line";

Par :
code type="javascript"> document.getElementById('chp_autre').style.display = "inline";</code>

Encore désolé pour le désagrément

sexyprout

13 juillet 2006 à 12:24:03

Toujours rien !

KinderSurpriZ

13 juillet 2006 à 13:04:52

Tu as inclus les balises du Zcode dans ton script Javascript ! C'est normal que ça ne marche pas

... Enlèves-les et ça marchera.

sexyprout

13 juillet 2006 à 15:23:19

Ca marche mais (y'a toujours un mais) je voudrai le champs de saisie à côté du menu déroulant !

[ eDiT ] C'est bon je l'ai fais ! Et merci !