[RESOLU] Afficher une textaera depuis bouton radio.

17 oct. 2022, 14:18

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.

Code : Tout sélectionner

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

17 oct. 2022, 14:28

en respectant la syntaxe normale de radio boutons :
https://developer.mozilla.org/fr/docs/W ... nput/radio

17 oct. 2022, 15:24

Bonjour or1,

J'ai essayé avec ce code, j'ai modifié aussi 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.

Code : Tout sélectionner

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

17 oct. 2022, 16:20

Bonjour,

L'écouteur javascript intercepte les événements "change" sur un seul des deux input : querySelector('[id="rdvoui"]')
Il faut appliquer l'écouteur sur l'autre input pour intercepter ses événements.

Au passage, la balise n'existe pas en html, c'est ou

17 oct. 2022, 16:38

Bonjour ynx
Déjà merci pour

Au passage, la balise n'existe pas en html, c'est ou

17 oct. 2022, 16:50

Bonjour Ynx,

j'ai essayé ce code mais cela ne fonctionne pas.

Code : Tout sélectionner

<!--   Script pour COMMENT-->
<script>
let COMMENTInput = document.querySelector('[id="commentoui"]')  || document.querySelector('[id="commentnon"]');
// 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");
}
else if(this.value === 'SANS COMMENTAIRE'){
document.querySelector('#new-comment-group').style.display = 'none';
document.querySelector('#new-comment-group textarea').removeAttribute("required");
}
});
</script>

même en modifiant la ligne

Code : Tout sélectionner

let COMMENTInput = document.querySelector('[id="commentoui"]')  || document.querySelector('[id="commentnon"]');
let COMMENTInput = document.querySelector('[id="commentoui"]')  &&  document.querySelector('[id="commentnon"]');

Merci.

17 oct. 2022, 20:32

avec cette syntaxe, COMMENTInput pointera vers le premier sauf si il return undefined et le 2ème sera évalué

essaye de pointer par le name
let COMMENTInput = document.querySelector('[name="rdv"]')

18 oct. 2022, 10:54

Bonjour Spols,

Je vais essayer ta solution.

J'ai trouvé ce code qui fonctionne aussi.

Code : Tout sélectionner

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

Merci beaucoup à tous.

[RESOLU] Afficher une textaera depuis bouton radio.

Qui est en ligne