Liste déroulante html >php

Résolu/Fermé

Html
Php

mika2413 Messages postés 19 Date d'inscription dimanche 29 mai 2011 Statut Membre Dernière intervention 5 octobre 2011 - 11 juin 2011 à 21:21
zeghad - 1 mai 2014 à 19:53

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

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
Supprimer liste déroulante Excel ✓ - Forum Excel
Effacer le contenue d'une cellule avec liste déroulante - Forum Excel

4 réponses

Réponse 1 / 4

avion-f16 Messages postés 19249 Date d'inscription dimanche 17 février 2008 Statut Contributeur Dernière intervention 15 juin 2024 4 505
Modifié par avion-f16 le 11/06/2011 à 22:05

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 :

<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.

Réponse 3 / 4

mika2413 Messages postés 19 Date d'inscription dimanche 29 mai 2011 Statut Membre Dernière intervention 5 octobre 2011 1
11 juin 2011 à 23:41

Bon, j'ai réussi, en tout cas merci beaucoup de m'avoir donné la méthode.
Je la poste pour les autres, ça peut toujours servir:

----------------------------------------------
Entre <head> et </head>
----------------------------------------------

<script language="javascript">
function changementType() {
var type = document.getElementById("id").value;
if (type == "liste_1") {
document.getElementById("1").style.display="block";
} else{
document.getElementById("1").style.display="none";
}
if (type == "liste_2"){
document.getElementById("2").style.display="block";
}else{
document.getElementById("2").style.display="none";
}

}
</script>

----------------------------------------------
Dans le <body>
----------------------------------------------

<select name="id" id="id" onchange="changementType();">
<option value="">Choisissez dans la liste</option>
<option value="liste_1">Titre 1</option>
<option value="liste_2">Titre 2</option>
</select>

<div id ="1" style="display:none">
Votre Texte <input type="text" name="nom_1" size="2"/>
Votre Texte<input type="text" name="nom_1_1" size="2"/>
</div>

<div id ="2" style="display:none">
Votre Texte<input type="text" name="nom_2" size="2"/>
Votre Texte<input type="text" name="nom_2_1" size="2"/>
</div>

Bien entendu, les formulaires dans les div sont à adapter en fonction des besoins de chacun ^^

Discussions similaires

[PHP] Remplir une liste déroulante à sa création

[html/php] [liste deroulante a plusieurs niveau]

relier la page html avec celle du php

inclure un fichier php dans une page html

formulaire contact sans PHP

Insérer une variable en PHP dans du HTML.