Création
d'entreprise
Posez votre question Signaler

[Formulaire] Afficher un champ par <SELECT> [Résolu]

rom1-du-91 341Messages postés 6 mars 2007Date d'inscription - Dernière réponse le 18 janv. 2010 à 17:23
Bonjour !
J'ai besoin de votre aide car j'ai un petit problème ;
- Sur mon (Futur) site internet, je voudrai créer une page pour déclarer des bugs présents sur tout le site, grâce à un formulaire qui m'avertirait par e-mail. Pour la question "Quel est le type du bug ?", j'ai opté pour une balise de liste déroutante (<SELECT></SELECT>); Et si le type du bug n'apparaît pas dans les choix proposés, je voudrais que quand le visiteur clique sur "Autre type de bug", un champ apparaisse en dessous en demandant d'y taper le genre du bug, MAIS SEULEMENT SUR AUTRE ! Voici mon code ; 
<SCRIPT>
function afficheautre
{
if (bug.défaillance.value == "autre")
bug.typedebug..style.display = "";
else
bug.typedebug..style.display = "none";
}
window.onload = afficheautre
</SCRIPT>

<FORM name="bug">
<SELECT name="défaillance">
<OPTION VALUE="faute">Faute d'Orthographe</OPTION>
<OPTION VALUE="fonctionnement">Ne fonctionne pas</OPTION>
<OPTION VALUE="lien">Lien mort</OPTION>
<OPTION VALUE="ouverture">Ouverture d'une fenêtre</OPTION>
<OPTION VALUE="chargement">Chargement de la page</OPTION>
<OPTION VALUE="graphisme">Graphisme</OPTION>
<OPTION VALUE="image">Image Manquante</OPTION>
<OPTION VALUE="favoris">Lien de favoris nul</OPTION>
<OPTION VALUE="recherche">Mots-Clés manquants</OPTION>
<OPTION VALUE="autre">Autre</OPTION>
</SELECT><BR>
<INPUT type="text" name="typedebug" style="display=none">
</FORM>

"typedebug" est bien absent sur la page (Au démarrage), mais il est tout aussi invisible quand on clique sur "autre". Quelqu'un aurait-il une idée pour que cela fonctionne ?
Lire la suite 

[Formulaire] Afficher un champ par <SELECT> »

6 réponses
Réponse
+2
moins plus
medoc 7 août 2008 à 12:06
Pour ajouter supprimer un élément quel qu'il soit, ce n'est pas 'visibility : hidden / visible' ,
il faut mieux utiliser 'display: none / bloc'
exemple:

<script type="text/javascript">
//raccourci pour récupérer l'id
function div(id){
return document.getElementById(id);
}
function afficheautre() {
if (document.bug.défaillance.options.value == "autre")
div('typedebug').style.display= 'bloc';
else
div('typedebug').style.display= 'none';
}
</script>

ne pas oublié de rajouter dans les css display:none

 Ajouter un commentaire
rems75 - 10 mars 2009 à 21:16
Salut medoc,

Il est vrai que ta méthode fonctionne mieux, car elle permet de s'affranchir des espace blancs indésirables...
Par contre, 'display: none / bloc' ne me semble pas correct, en effet ce serait plutôt 'display: none / block' ...

En tout cas, ton code se met à marcher chez moi avec cette modif !
Encore merci pour l'entraide !!

Rems
Ajouter un commentaire
Réponse
+1
moins plus
coco_83 702Messages postés 2 mai 2007Date d'inscription 27 octobre 2011Dernière intervention 17 juin 2007 à 17:57
Bonjour,

Il existe une autre alternative que se retrouver avec un champ vide : mettre le champ en question dans un span comme ceci: 
<span id="champ_autre_bug" style="visibility:hidden"><input type="text" name="typedebug"></span>

puis faire apparaître le span et pas le text via le script.
Si par contre vous souhaitez stocker le résultat dans ue base de données alors là laisser le code tel quel : le champ vide servira.

PS : évitez les accents et espaces dans le code html de la page! Plutôt que <SELECT name="défaillance" OnChange="afficheautre();">, mettre <SELECT name="defaillance" OnChange="afficheautre();">, des fois ca peut aider : les accents font parfois planter.

coco_83

 Ajouter un commentaire
Ajouter un commentaire
Réponse
+1
moins plus
Ichitaka 18 juin 2009 à 11:32
Tu peux aussi utiliser les champs cachés comme ceci :

<INPUT type="hidden" name="typedebug" value="ce_dont_tu_as_besoin">

 Ajouter un commentaire
irishcofee - 18 janv. 2010 à 17:23
tres interessant ce post. mais pouvez vous mettre le code complet définitif. celui qui fonctionne. parcequelà pour retrouver le bon code total, c'est chaud.

;)

merci
Ajouter un commentaire
Réponse
+0
moins plus
rom1-du-91 341Messages postés 6 mars 2007Date d'inscription 17 juin 2007 à 17:46
(Re) Bonjour à tous !!!

Après avoir bossé quelque heures, j'ai ENFIN trouvé la solution a ce problème !!!!!!! 

<script language="JavaScript">
function afficheautre() {
if (document.bug.défaillance.options.value == "autre")
document.getElementById('typedebug').style.visibility = 'visible';
else
document.getElementById('typedebug').style.visibility = 'hidden';
}
</script>

<FORM name="bug">
<SELECT name="défaillance" OnChange="afficheautre();">
<OPTION VALUE="faute">Faute d'Orthographe</OPTION>
<OPTION VALUE="fonctionnement">Ne fonctionne pas</OPTION>
<OPTION VALUE="lien">Lien mort</OPTION>
<OPTION VALUE="ouverture">Ouverture d'une fenêtre</OPTION>
<OPTION VALUE="chargement">Chargement de la page</OPTION>
<OPTION VALUE="graphisme">Graphisme</OPTION>
<OPTION VALUE="image">Image Manquante</OPTION>
<OPTION VALUE="favoris">Lien de favoris nul</OPTION>
<OPTION VALUE="recherche">Mots-Clés manquants</OPTION>
<OPTION VALUE="autre">Autre</OPTION>
</SELECT><BR>
<INPUT type="text" name="typedebug" style="visibility=hidden">
</FORM>


Petit inconvégnant néanmoins; ce script ne sert qu'à cacher/afficher "typedebug".=, et non à le faire ajouter/supprimer... En somme, vous aurez un trou dans votre formulaire, celui du champs CACHÉ.

 Ajouter un commentaire
Ajouter un commentaire
Posez votre question
Ce document intitulé « [Formulaire] Afficher un champ par <SELECT> » issu de CommentCaMarche (www.commentcamarche.net) est mis à disposition sous les termes de la licence Creative Commons. Vous pouvez copier, modifier des copies de cette page, dans les conditions fixées par la licence, tant que cette note apparaît clairement.
Dossier à la une
Passage au tout numérique : quel coût pour les particuliers ?