appliquer des conditions sur un formulaire

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.

Je ne comprends pas trop ce que tu veut faire, mais il semble que ce soit l'attribut "value" qui t’intéresse ici, un exemple : https://jsfiddle.net/phbacb3p/

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;
}

Merci, je me pencherai plus en détail sur les deux méthodes, à première vue elles répondent à mes attentes .

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.

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

+1 pour tleb

Merci pour vos réponses, elles m'aident beaucoup