Discussion :

[peyau]

Hello,

Je suis une quiche en Javascript...

Mon script ressemble à ceci, mais dans ma console j'obtiens un message "Uncaught TypeError: Cannot read property 'undefined' of undefined"

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
<script>
var select = document.getElementsByName("lieux");
var options = document.getElementsByTagName("option");
var optionValue = select.options[select.selectedIndex].value;
 
select.addEventListener('change', function()
{
   optionValue = select.options[select.selectedIndex].value;
   if (optionValue == 'Hors les murs')
   {
        // Afficher <input type="text" name="autreLieu"> (je n'ai pas encore regardé plus en détails comment afficher le champ, mais je suppose que c'est avec un .show)
   }
   elseif (optionValue != 'Hors les murs')
   {
        // cacher <input type="text" name="autreLieu"> (et ici un .hide)
   }
})
</script>

Mon HTML ressemble à ça

Code html :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
6
7
8
9
10
<select name="lieux">
        <?php
        $reqLieux = $bdd->prepare('SELECT * FROM lieux');
        $reqLieux->execute();
 
        while ($donnees = $reqLieux->fetch()) {
          echo '<option value="'.$donnees['libelle_lieux'].'">' . $donnees['libelle_lieux'] . '</option>';
        }
        ?>
      </select>

C'est une partie php, mais dans ce cas on s'en fout un peu, c'est comme si c'était :

Code html :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
<option value="lieu1">lieu1</option>
<option value="lieu2">lieu2</option>
<option value="lieu3">lieu3</option>
<option value="Autre">Autre</option>

Mon but est qu'en choisissant "Autre", un champ de type text s'affiche pour me permettre de préciser un lieu dedans...

Merci pour votre aide !

[peyau]

J'ai résolu en changeant complètement de méthode...

Code html :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
      <select onchange="champAutre(this);">
        <?php
        $reqLieux = $bdd->prepare('SELECT * FROM lieux');
        $reqLieux->execute();
 
        while ($donnees = $reqLieux->fetch()) {
          echo '<option value="'.$donnees['libelle_lieux'].'">' . $donnees['libelle_lieux'] . '</option>';
        }
        ?>
 
      </select>
      <div id="siAutre" style="display: none;">
        <label for="precisionLieu">Préciser : </label> <input type="text" name="precisionLieu"/><br />
      </div>
 
<script type="text/javascript">
function champAutre(that) {
    if (that.value == "Hors les murs") {
        document.getElementById("siAutre").style.display = "block";
    } else {
        document.getElementById("siAutre").style.display = "none";
    }
}
</script>