Comment désactiver un TEXTAREA selon une option SELECT ?

Réponses rédigées par Antoine

Dernière mise à jour : 2022-05-18 10:35:37

Question

Bonjour,

Je dois désactiver des textaera, et les réactiver et les rendre obligatoire, selon un item choisit dans une listebox. Mais je n'arrive pas à ce que cela fonctionne. Voici mon code.

    Poste(s) de travail
  <br/><br/> 
 Veuillez selectionner l'intervention effectuée *
 <br/>
  <form method="post" action="sdp-autre-intervention.php" >
<select name="demg" required/>
 <option value="">Selectionner...</option>
<option value="DEM_PDT" id="DEM">Déménagement</option>
<option value="PRT" id="PRT">Prêt</option>
<option value="NDO" id="NDO">Nouvelle dotation sans reprise</option>
<option value="REP" id="REP">Reprise sans nouvelle dotation</option>
<option value="REN" id="REN">Nouvelle dotation + reprise(renouvelement)</option>
</select>
<br/><br/>
Veuillez selectionner le type de poste*
<br/>
<select name="prt" required/>
 <option value="">Selectionner...</option>
<option value="PCF"" >Poste fixe</option>
<option value="LAP">Laptop + avec ou sans station d'accueil</option>
<option value="SCI" >Poste scientifique</option>
</select>
<br/><br/>
<table align="center">
  <tr>
    <td align="center">
    <b>New asset:*</b>
    </td>
    <td align="center">
     <b>Old asset:*</b>
    </td>
  </tr>
  <tr>
    <td>
    <!-- <div id="new-asset-group" style="display: none;"> -->
  <textarea name="new-asset" id="new-asset" rows="5"></textarea>
    <!-- </div> -->
    </td>
    <td>
    <!-- <div id="old-asset-group" style="display: none;"> -->
      <textarea name="old-asset" id="old-asset" rows="5"></textarea>
    <!-- </div> -->
    </td>
  </tr>
  <tr>
    <td colspan="2">
    <input type="radio" id="XXX" onchange="document.getElementById('new-asset').value=id"  />
    <b>Hostname inconnu ou matériel non sérialisé.</b>
  <input type="radio" id="XXX" onchange="document.getElementById('old-asset').value=id"  />
    </td>
    <td></td>
  </tr>
</table>
<br/>
Durée de l'opération en Minutes *
<br/>
<input type="hidden" name="balise" value="" />
<input type="number" name="time" tabindex="20" required />
<br/><br/>
<input type="submit" value="Suivant"/>
 </form>
<script>
 let demgSelect = document.querySelector('[name="demg"]');

// On va intercepter les événements "change" du select
// Cela correspond à un changement d'option sélectionnée
demgSelect.addEventListener('change', function() {
  // On cache les assets par défaut
  document.querySelector('#new-asset').style.display = 'none';
  document.querySelector('#new-asset textarea').removeAttribute("required");
  document.querySelector('#old-asset').style.display = 'none';
  document.querySelector('#old-asset textarea').removeAttribute("required");
  // Si la valeur du select est REN alors on affiche les 2 assets
  if(this.value === 'REN') {
    document.querySelector('#new-asset').style.display = 'block';
    document.querySelector('#new-asset textarea').setAttribute("required","required");
    document.querySelector('#old-asset').style.display = 'block';
    document.querySelector('#old-asset textarea').setAttribute("required","required");
  } 
  // Sinon si la valeur est REP, alors on affiche que les vieux assets
  else if(this.value === 'REP') {
    document.querySelector('#old-asset').style.display = 'block';
    document.querySelector('#old-asset textarea').setAttribute("required","required");
  }
});
</script>

Pouvez-vous m'aider? Par avance merci.

Réponse

Bonjour, tout d'abord quelques points de détails. Si vous codez en HTML 5 :

<!DOCTYPE HTML>
<html>
<head>
...

Toutes les balises HTML qui n'ont pas de balises de fermetures (comme les balises br, input, img, etc.) n'ont pas besoin de / final.

Concernant votre problème, votre code JavaScript est quasiment correct si ce n'est que :

this.value === 'REP' ne fonctionne pas car this est non défini.
#old-asset textarea est également indéfini, le textarea est superflu.

Vous devriez plutôt utiliser :

demgSelect.value === 'REP' où demgSelect est préalablement défini.
#old-asset seul est suffisant.

Ainsi le code JS suivant devrait mieux fonctionner :

<script>
let demgSelect = document.querySelector('[name="demg"]');

// On va intercepter les événements "change" du select
// Cela correspond à un changement d'option sélectionnée
demgSelect.addEventListener('change', function() {
  // On cache les assets par défaut
  document.querySelector('#new-asset').style.display = 'none';
  document.querySelector('#new-asset').removeAttribute("required");
  document.querySelector('#old-asset').style.display = 'none';
  document.querySelector('#old-asset').removeAttribute("required");
  // Si la valeur du select est REN alors on affiche les 2 assets
  if(demgSelect.value === 'REN') {
    document.querySelector('#new-asset').style.display = 'block';
    document.querySelector('#new-asset').setAttribute("required","required");
    document.querySelector('#old-asset').style.display = 'block';
    document.querySelector('#old-asset').setAttribute("required","required");
  } 
  // Sinon si la valeur est REP, alors on affiche que les vieux assets
  else if(demgSelect.value === 'REP') {
    document.querySelector('#new-asset').style.display = 'none';
    document.querySelector('#new-asset').removeAttribute("required");  
    document.querySelector('#old-asset').style.display = 'block';
    document.querySelector('#old-asset').setAttribute("required","required");
  }
});
</script>