11487 sujets

JavaScript, DOM et API Web HTML5

Afficher contenu si option de select sélectionnée

Bonjour,

J'ai un <select> avec deux <option>. Je voudrais que lorsque on sélectionne l'option 1, une div s'affiche, et que si on sélectionne l'option 2, une autre div s'affiche. J'ai très peu de connaissances en JS et j'aurais donc besoin d'aide pour faire cela.

Voici mon code actuel : https://codepen.io/Titouan79/pen/orJKmJ

J'ai ajouté des commentaires au code pour que vous compreniez ce qu'il faut afficher.

Merci d'avance pour vos réponses Smiley smile 
<form class="default-form" action="/handball_club_manager_V2/register.php" method="POST">
  <select id = "status-select" class="default-select" name="status-select" onchange="cache(this.value)">
    <optgroup label="Type d'inscription">
      <option value="default" selected hidden>Choisissez votre statut</option>
      <option value="utilisateur">Inscription Club</option> <!-- OPTION 1 -->
      <option value="club">Inscription Utiilisateur</option> <!-- OPTION 2 -->
    </optgroup>
  </select>
  <div class="register-club-form"> <!-- A afficher si OPTION 1 sélectionnée -->
    <div class="default-fieldset">
      <input class="club-name" type="text" placeholder="Nom du club">
    </div>
    <div class="default-fieldset">
      <input class="dep-code" type="text" placeholder="Numéro Département (5 chiffres)" maxlength="5">
      <input class="dep-name" type="text" placeholder="Nom Département">
    </div>
    <div class="default-fieldset">
      <input class="dep-committee" type="text" placeholder="Comité départemental">
      <input class="reg-league" type="text" placeholder="Ligue régionale">
      <input class="nat-federation" type="text" placeholder="Fédération">
    </div>
    <div class="default-fieldset">
      <input class="office-location" type="text" placeholder="Siège social">
    </div>
    <div class="default-fieldset">
      <input class="hall1-name" type="text" placeholder="Salle 1">
      <input class="hall2-name" type="text" placeholder="Salle 2 (Optionnel)">
      <input class="hall3-name" type="text" placeholder="Salle 3 (Optionnel)">
    </div>
    <div class="default-fieldset">
      <input type="creation-date" type="text" placeholder="Date de création">
    </div>
    <input class="submit-input" type="submit" value="Inscription">
  </div>
  <div class="register-user-form"> <!-- A afficher si OPTION 2 sélectionnée -->
    <div class="default-fieldset">
      <input class="club-name" type="url" placeholder="Lien d'invitation">
    </div>
    <input class="submit-input" type="submit" value="Inscription">
  </div>
</form>



.register-club-form{
  visibility: hidden;
}
.register-user-form{
  visibility: hidden;
}


function cache(val){
   document.getElementById("status-select").disabled = true;
    if (val == "utilisateur")
   document.getElementsByClassName("register-club-form")[0].style.visibility= "visible"
    if (val == "club")
      document.getElementsByClassName("register-user-form")[0].style.visibility= "visible"
}



A savoir que ce n'est pas sécurisé et que si c'est par exemple un site pour une association il faudra faireune vérifiaction au moins php dérrière !
Merci beaucoup pour ta réponse ! Ça marche bien, mais il faudrait que lorsqu'on sélectionne l'option 2, la div 2 remonte à la même hauteur que la div 1, et que le select ne soit pas bloqué pour que l'utilisateur puisse sélectionner l'autre option s'il le souhaite.

Merci d'avance Smiley smile
Modifié par Titouan79 (10 Jul 2019 - 18:20)
Re-bonjour,

J'ai une autre contrainte à respecter : Il faudrait que lorsque l'on clique sur le bouton "submit" (qui recharge la page), la div qui a été ouverte précédemment reste affichée si elle ne comporte des erreurs ($error dans le php) et se ferme s'il n'y a pas d'erreur (comme le code actuellement). En effet, les erreurs de remplissage du formulaire vont s'afficher au dessous de chaque input, et il faudrait donc que l'utilisateur voit les erreurs directement, sans avoir à recliquer sur l'option qui ouvre la div.

Merci d'avance Smiley smile
Modifié par Titouan79 (17 Jul 2019 - 15:58)
Sujet clos
Aller à