FORMULAIRE | Récupérer la valeur selectionnée dans un <select> <option> et l'afficher

[Swidix]

Bonjour, j'ai créé une liste déroulante HTML comprenant 4 valeurs. Je souhaite la récupérer avec du JS mais je n'y parviens pas... (après avoir cherché un peu partout grrr!)

Quelqu'un pourrait m'aiguiller ?

Mon HTML :

Code:

<label for="direction"><strong>Bureau :</strong></label>
        <select id="direction" class="form-control">
          <option value="bc">Bureau Central</option>
          <option value="bos">Bureau des Opérations Spéciales</option>
          <option value="bi">Bureau des Investigations</option>
          <option value="ba">Bureau Administratif</option>
        </select>

Mon JS :

Code:

var listeDir = form.getElementById("direction"); // récup le choix déroulant
        var dir = listeDir.options[listDir.selectedIndex].value; // récupère la value selected

Merci pour votre aide !

[Toryudo]

Bonjour !
Plus simple encore, vous pouvez trouver la valeur sélectionnée en une ligne, juste en récupérant la value de l'Id :

Code:

var dir = document.getElementById('direction').value;

[Swidix]

Super, je tente de suite (merci pour cette réponse ultra rapide!)

Une question dans le document.getElementById... à quoi correspond le document ? Car cette fonction fera parmi de plusieurs autres, toutes comprises dans ma fonction JS function envoiMessage(form) { code JS }

Dois je donc remplacer le document par le nom de la fonction dans laquelle elle se trouve ? càd form ou laisser document ?

[Toryudo]

Toujours utiliser "document" avec la fonction getElementById() : vous pouvez considérer que cela désigne la page complète, dans laquelle on cherche donc un id. La variable document est disponible où que vous soyez dans le code, elle est globale !

[Swidix]

D'accord merci !

Code:

<script type="text/javascript">

      var dir = document.GetElementById('direction').value;

      function envoiMessage(form) {

      //code supprimé pour clarté...

      form.subject.value = "[" + dir + "] Dépôt de saisie (" + form.identiteSuspect.value + ")";

      }
    </script>

Alors voilà mon code... le JS fonctionne et transmet le formulaire mais la value direction est reconnue mais pas lue et ressort non définie "[undefined] Dépôt de saisie (Prénom Nom)"

Pourtant chaque value est correctement renseignée...

Code:

<label for="direction"><strong>Bureau :</strong></label>
        <select id="direction" class="form-control">
          <option value="bc">Bureau Central</option>
          <option value="bos">Bureau des Opérations Spéciales</option>
          <option value="bi">Bureau des Investigations</option>
          <option value="ba">Bureau Administratif</option>
        </select>

J'ai essayé de sortir la fonction form.subject.value de la fonction form mais à ce moment là le JS plante et aucune donnée n'est transmise au forum ???

[Toryudo]

Alors attention, getElementById avec ces majuscules et ces minuscules, donc sans majuscule au get !
Si ça ne suffit pas à corriger le problème, pourriez-vous fournir le code complet afin que je puisse vérifier si tout le reste est bon ? Il peut y avoir d'autres petites erreurs par-ci par-là.

[Swidix]

Super ! Alors effectivement voilà mes 2 erreurs :

- La formule getElementById était mal orthographiée (j'avais mis un G majuscule à Get)
- La formule getElementById était en dehors de ma fonction de collecte des données (function envoiMessage(form)) alors qu'elle aurait du être à l'intérieur.

Merci Toryudo, ce n'est pas la première fois que vous me venez en aide et je vous en suis très reconnaissant !