Liste déroulante html >php
Résolu
mika2413
Messages postés
19
Date d'inscription
Statut
Membre
Dernière intervention
-
zeghad -
zeghad -
Bonjour,
je suis entrain de créer une page avec un grand formulaire comprenant plusieurs inputs, dont certains avec liste déroulante.
Regardez l'input suivant:
Type de choix ? <select name="choix">
<option value="1">Choix 1</option>
<option value="2">Choix 2</option>
<option value="3">Choix 3</option>
<option value="4">Choix 4</option>
</select>
Le choix par défaut est le choix 1.
Plus bas, j'aimerais qu'à chaque choix sélectionné, je puisse afficher un nouvel input à mon formulaire, mais sans avoir besoin de cliquer sur valider, que cela se fasse "à la volée".
Genre si la personne clique pour dérouler la liste, et choisisse le choix n°3, instantanément un nouvel input apparait en rapport avec ce choix plus bas (mon formulaire comprenant plusieurs inputs, le bouton valider se trouve tout en bas, après cette condition que j'aimerai mettre en place).
Je ne sais pas si c'est possible de le faire avec des conditions en php :-s
Votre aide est la bienvenue!
Merci d'avance
je suis entrain de créer une page avec un grand formulaire comprenant plusieurs inputs, dont certains avec liste déroulante.
Regardez l'input suivant:
Type de choix ? <select name="choix">
<option value="1">Choix 1</option>
<option value="2">Choix 2</option>
<option value="3">Choix 3</option>
<option value="4">Choix 4</option>
</select>
Le choix par défaut est le choix 1.
Plus bas, j'aimerais qu'à chaque choix sélectionné, je puisse afficher un nouvel input à mon formulaire, mais sans avoir besoin de cliquer sur valider, que cela se fasse "à la volée".
Genre si la personne clique pour dérouler la liste, et choisisse le choix n°3, instantanément un nouvel input apparait en rapport avec ce choix plus bas (mon formulaire comprenant plusieurs inputs, le bouton valider se trouve tout en bas, après cette condition que j'aimerai mettre en place).
Je ne sais pas si c'est possible de le faire avec des conditions en php :-s
Votre aide est la bienvenue!
Merci d'avance
A voir également:
- Liste déroulante html php
- Liste déroulante excel - Guide
- Liste déroulante en cascade - Guide
- Supprimer liste déroulante excel ✓ - Forum Excel
- Liste déroulante google sheet - Accueil - Guide bureautique
- Supprimer liste déroulante Excel ✓ - Forum Excel
4 réponses
Salut,
« mais sans avoir besoin de cliquer »
La voilà la solution : Javascript
C'est assez simple à faire : pour chaque choix, tu crées un cadre (div) ayant comme id la valeur du choix auquel il correspond et contenant le champ et le texte.Voilà un exemple :
Ces cadres seront masqués à l'aide du CSS.
Sur la liste principale, lorsqu'on change d'option (onchange) :
- Masquer le div actuellement ouvert
- Récupérer la nouvelle valeur de la liste
- Récupérer l'élément ayant cette valeur comme id
- Changer la propriété CSS de cet élément.
La pensée mène le monde.
« mais sans avoir besoin de cliquer »
La voilà la solution : Javascript
C'est assez simple à faire : pour chaque choix, tu crées un cadre (div) ayant comme id la valeur du choix auquel il correspond et contenant le champ et le texte.Voilà un exemple :
<label for="maque_id">Marque :</label>
<select name="marque" id="marque_id">
<option value="audi">Audi</option>
<option value="bmw">BMW</option>
<!-- ... -->
</select>
<div id="audi">
<label for="audi_modele_id">Modèle :</label>
<select name="audi_modele" id="audi_modele_id">
<option value="a4">A4</option>
<option value="rs6">RS6</option>
<option value="r8">R8</option>
<!-- ... ->
</select>
</div>
<div id="bmw">
<label for="bmw_modele_id">Modèle :</label>
<select name="bmw_modele" id="bmw_modele_id">
<option value="s3">Serie 3</option>
<option value="s6">Serie 6</option>
<option value="x5">X5</option>
<!-- ... ->
</select>
</div>
Ces cadres seront masqués à l'aide du CSS.
Sur la liste principale, lorsqu'on change d'option (onchange) :
- Masquer le div actuellement ouvert
- Récupérer la nouvelle valeur de la liste
- Récupérer l'élément ayant cette valeur comme id
- Changer la propriété CSS de cet élément.
La pensée mène le monde.
