8768 sujets

Développement web côté serveur, CMS

[Résolu] Afficher une textaera depuis bouton radio.

Bonjour,

Ce code fonctionne bien.
Le seul soucis est que l'user peut cocher les deux boutons en même temps.
Si je met un required sur chaque bouton radio, il faut les cocher tous les deux obligatoirement.

Ce que j'aimerais:
Lorsque que le bouton radio Non est coché, il soit possible de cocher le bouton radio oui, mais cela décoche le Non.
et inversement.

Merci à vous.

<input type="radio" name="comment" value="SANS COMMENTAIRE">
<label>NON</label>
&emsp;
<input type="radio" name="commentoui" value="COMMENT">
<label>OUI</label>
<br/>
<div id="new-comment-group" style="display: none;">
  <textarea name="cmntexte" id="cmntexte" cols="90" rows="10"></textarea>
</div>


<!--   Script pour COMMENT -->
<script>
let COMMENTInput = document.querySelector('[name="commentoui"]');
// On va intercepter les événements "change" du bouton radio
// Cela correspond à un changement d'option sélectionnée
COMMENTInput.addEventListener('change', function() {
// On cache les assets par défaut
document.querySelector('#new-comment-group').style.display = 'none';
document.querySelector('#new-comment-group textarea').removeAttribute("required");
// Si la valeur du radio est COMMENT alors on affiche la textarea
if(this.value === 'COMMENT') {
document.querySelector('#new-comment-group').style.display = 'block';
document.querySelector('#new-comment-group textarea').setAttribute("required","required");
}
});
</script>

Merci à vous.
Modifié par wisefun77 (17 Oct 2022 - 14:20)
Bonjour,

il faut que tes boutons radio aient le même nom pour former un groupe. La sélection d'un bouton radio dans ce groupe désélectionne automatiquement tout autre bouton radio sélectionné dans le même groupe.
Bonjour ,

J'ai modifié lecode et le script.
Mais quand le bouton radio oui est coché la liste box s'affiche, mais si on coche le bouton radio NON , la liste box ne disparait pas.

<td>
            <legend><b>Un rendez-vous était-il prévu initialement pour cette intervention ?</b></legend>
            <input type="radio" name="rdv" id="rdvnon" value="[RDV_NON][RDV_BAL]">
            <label>NON</label>
            &emsp;
            <input type="radio" name="rdv" id="rdvoui" value="RDV_OUI">
            <label>OUI</label>
            <br/>
            <div id="new-rdv-group" style="display: none;">
            Veuillez selectionner un des cas ci-dessous
            </br>
            <select name="new-rdv">
                <option value="">Sélectionner</option>
                <option value="[RDV_RESPECTE_OUI]">Le RDV a été respecté, ou bien n'a pas eu lieu pour une raison non imputable à SSC [decu]panne réseau..)</option>
                <option value="[RDV_RESPECTE_OUI]">L'utilisateur(trice) n'était pas présent(e) au RDV (sans avoir prévenu(e))</option>
                <option value="[RDV_ANNULE_USER]">Le RDV a été annulé par l'utilisateur(trice)</option>
                <option value="[RDV_NON RESPECTE SCC]">SCC n'était pas présent au RDV (sans avoir prévenu)</option>
                <option value="[RDV_ANNULE_SDP]">Le RDV a été annulé par SCC</option>
            </select>
            </div>
            </td>
   <!--   Script pour RDV -->
<script>
let RDV_OUIInput = document.querySelector('[id="rdvoui"]');
// On va intercepter les événements "change" du bouton radio
// Cela correspond à un changement d'option sélectionnée
RDV_OUIInput.addEventListener('change', function() {
// On cache les assets par défaut
document.querySelector('#new-rdv-group').style.display = 'none';
document.querySelector('#new-rdv-group select').removeAttribute("required");
// Si la valeur du radio est RDV_OUI alors on affiche le select
if(this.value === 'RDV_OUI') {
document.querySelector('#new-rdv-group').style.display = 'block';
document.querySelector('#new-rdv-group select').setAttribute("required","required");
}
});
</script>


Merci pour ton aide.
Essaie ça:

<script>
document.querySelector('#new-rdv-group').style.display = 'none';
document.querySelector('#new-rdv-group select').removeAttribute("required");
document.getElementsByName('rdv').forEach(function (e) 
{
  e.addEventListener("click", function () 
  {
    if (e.value === 'RDV_OUI') 
    {
      document.querySelector('#new-rdv-group').style.display = 'block';
      document.querySelector('#new-rdv-group select').setAttribute("required", "required");
    }
    else
    {
      document.querySelector('#new-rdv-group').style.display = 'none';
      document.querySelector('#new-rdv-group select').removeAttribute("required");
    }
  });
});

</script>
Meilleure solution
\ô/
concernant l'affichage ou non de la box, et compte tenu de ta structure, tu peux également le faire en CSS
#new-rdv-group {
  display: none;
}
#rdvoui:checked ~ #new-rdv-group {
  display: block;
}


PS : Les « vrais » contrôles sont à faire côté serveur, le required n'exonère pas ce ceux-ci.
Sujet clos
Aller à