[Formulaire] Afficher un champ par <SELECT>
Résolu
Utilisateur anonyme
-
irishcofee -
irishcofee -
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 ;
"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 ?
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 ?
A voir également:
- [Formulaire] Afficher un champ par <SELECT>
- Whatsapp formulaire opposition - Guide
- Formulaire de réclamation facebook - Guide
- Afficher appdata - Guide
- Formulaire de reclamation instagram - Guide
- Afficher taille dossier windows - Guide
4 réponses
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
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
Bonjour,
Il existe une autre alternative que se retrouver avec un champ vide : mettre le champ en question dans un span comme ceci:
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
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
Tu peux aussi utiliser les champs cachés comme ceci :
<INPUT type="hidden" name="typedebug" value="ce_dont_tu_as_besoin">
<INPUT type="hidden" name="typedebug" value="ce_dont_tu_as_besoin">
(Re) Bonjour à tous !!!
Après avoir bossé quelque heures, j'ai ENFIN trouvé la solution a ce problème !!!!!!!
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É.
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É.
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