appliquer des conditions sur un formulaire

L'auteur de ce sujet a trouvé une solution à son problème.
Auteur du sujet

Bonjour,

Je souhaite créer un formulaire ou ma liste déroulante change en fonction du choix fait par l'utilisateur à la précédente liste déroulante(ou une case cochée).

et pour cela je voudrais savoir comment je peux faire pour récupérer la valeur choisie par l'utilisateur pour pouvoir lui appliquer mes conditions ?, j'ai pensé qu'il fallait utiliser JavaScript mais dans mes essais je ne récupérais pas la valeur choisie par l'utilisateur mais celle par défaut ,je m'explique mon JavaScript se lance au même moment que la page, il récupère la valeur par défaut et ne récupère pas une nouvelle valeur quand l'utilisateur coche une autre case .

Je vous remercie d'avance pour vos réponses.

Édité par naomi

+0 -0

Salut,
tu peux faire cela en CSS pur :)

Exemple :

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
<input type="radio" name="monNameRadio" value="maValueRadio1" id="monIdRadio1" class="maClassRadio"/>
<label for="monIdRadio1">monLabel1</label>
<select name="monNameSelect1" class="maClassSelect">
    <option value="maValue1.1">Option1.1</option>
    <option value="maValue1.2">Option1.2</option>
    <option value="maValue1.3">Option1.3</option>
</select>

<input type="radio" name="monNameRadio" value="maValueRadio2" id="monIdRadio2" class="maClassRadio"/>
<label for="monIdRadio2">monLabel2</label>
<select name="monNameSelect2" class="maClassSelect">
    <option value="maValue2.1">Option2.1</option>
    <option value="maValue2.2">Option2.2</option>
    <option value="maValue2.3">Option2.3</option>
</select>

<input type="radio" name="monNameRadio" value="maValueRadio3" id="monIdRadio3" class="maClassRadio"/>
<label for="monIdRadio3">monLabel1</label>
<select name="monNameSelect3" class="maClassSelect">
    <option value="maValue3.1">Option3.1</option>
    <option value="maValue3.2">Option3.2</option>
    <option value="maValue3.3">Option3.3</option>
</select>
1
2
3
4
/* Si le bouton radio n'est pas sélectionné, on affiche pas le select */
input.maClassRadio::not(::checked) + label + select.maClassSelect{
    display : none;
}
+0 -0

Avec la solution du CSS, tu ne peux pas être dynamique, cest a dire que tu ne peux pas modifier le formulaire suivant en fonction de l'entrée sélectionner.

L'idéale selon moi serait de passer par JQuery.

Et faire quelque chose comme ceci:

1
2
3
4
5
6
$('#tonInput').change(function(){
  var value = $('#tonInput').val();

  //Et ensuite 
  $('#tonInoputSuivant').show(); //Ou autre fonction 
});

Jai juste un doute si la fonction 'change()' existe, maos comme je suis sur mobile je ne peux pas tester.

Édité par WinXaito

+0 -1

Cette réponse a aidé l'auteur du sujet

L'idéale selon moi serait de passer par JQuery.

WinXaito

Il faut arrêter de recommander jQuery dès que quelqu'un veut faire un petit truc en JS.

En JS, voici un exemple complétement fonctionnel sur JSBin. 218B de JS quand compressé.

En gros, le fonctionnement est le suivant :

  • Le CSS initialise le tout en cachant toutes les options du select2 sauf celles qui correspondent à l'option sélectionné de base dans le select1.
  • Le JS agit à chaque fois que l'on modifie la valeur du select1.
  • On boucle sur toutes les options du select2. Si leur classe est égal à la valeur qu'il y a dans le select1, on les affiche (display = block), sinon on les cache (display = none).
  • Ensuite, on boucle une seconde fois sur toutes les options du select2. Dès qu'on trouve une option qui est visible (càd display = block), on sélectionne cette option et on arrête de boucler. Ça fait que la valeur sélectionné, après avoir changé d'option dans le select1, est la première option visible dans le select2.

Les erreurs et warnings sont dû au fait que je ne met pas de point virgule. JS fonctionne très bien sans, et je trouve qu'on arrive mieux à lire le code. Si il y a besoin de minifier, l'outil les ajoutera au besoin.

Ça ne sert à rien de prendre une remorque pour transporter un mouchoir.

Mon esprit bizarre

Édité par tleb

It goes against the grain of modern education to teach children to program. What fun is there in making plans, acquiring discipline in organizing thoughts, devoting attention to detail and learning to be self-critical? – Perlis

+5 -0

Avec la solution du CSS, tu ne peux pas être dynamique, c'est a dire que tu ne peux pas modifier le formulaire suivant en fonction de l'entrée sélectionnée.

? Il me semble que si. Tu dois peut-être faire de la redondance entre chaque "select", mais cela marche. Ce qui est plus gênant c'est que c'est bien plusieurs "select" différents, qui seront tous envoyés en post, et qui ne s'afficheront pas au même endroit.

Si tu as envie de n'avoir qu'un seul "select", c'est encore possible en CSS, mais un peu plus "sale".

L'idéale selon moi serait de passer par JQuery.

WinXaito

Il faut arrêter de recommander jQuery dès que quelqu'un veut faire un petit truc en JS.

tleb

+1 pour tleb

Édité par SeeoX

+0 -0
Vous devez être connecté pour pouvoir poster un message.
Connexion

Pas encore inscrit ?

Créez un compte en une minute pour profiter pleinement de toutes les fonctionnalités de Zeste de Savoir. Ici, tout est gratuit et sans publicité.
Créer un compte