Page 1 sur 1
Afficher une textaera depuis bouton radio.
Posté : 17 oct. 2022, 14:18
par wisefun77
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>
 
<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.
Re: Afficher une textaera depuis bouton radio.
Posté : 17 oct. 2022, 14:28
par or 1
Re: Afficher une textaera depuis bouton radio.
Posté : 17 oct. 2022, 15:24
par wisefun77
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>
 
<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.
Re: Afficher une textaera depuis bouton radio.
Posté : 17 oct. 2022, 16:20
par ynx
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 </br> n'existe pas en html, c'est <br> ou <br />
Re: Afficher une textaera depuis bouton radio.
Posté : 17 oct. 2022, 16:38
par wisefun77
Bonjour ynx
Déjà merci pour
Au passage, la balise </br> n'existe pas en html, c'est <br> ou <br />
Re: Afficher une textaera depuis bouton radio.
Posté : 17 oct. 2022, 16:50
par wisefun77
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.
Re: Afficher une textaera depuis bouton radio.
Posté : 17 oct. 2022, 20:32
par Spols
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"]')
Re: Afficher une textaera depuis bouton radio.
Posté : 18 oct. 2022, 10:54
par wisefun77
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.