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

2 participants

Voir le sujet précédent Voir le sujet suivant Aller en bas

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

Message par Swidix Lun 27 Déc 2021 - 10:48

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 !


Dernière édition par Swidix le Lun 27 Déc 2021 - 12:09, édité 1 fois
Swidix

Swidix
Nouveau membre

Messages : 13
Inscrit(e) le : 04/12/2021

Voir le profil de l'utilisateur https://lspd-online.forumactif.com
Swidix a été remercié(e) par l'auteur de ce sujet.
  • 0

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

Message par Toryudo Lun 27 Déc 2021 - 10:52

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

Toryudo
****

Masculin
Messages : 426
Inscrit(e) le : 31/03/2020

Voir le profil de l'utilisateur https://deus-academia.forumactif.com/
Toryudo a été remercié(e) par l'auteur de ce sujet.

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

Message par Swidix Lun 27 Déc 2021 - 11:03

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

Swidix
Nouveau membre

Messages : 13
Inscrit(e) le : 04/12/2021

Voir le profil de l'utilisateur https://lspd-online.forumactif.com
Swidix a été remercié(e) par l'auteur de ce sujet.
  • 0

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

Message par Toryudo Lun 27 Déc 2021 - 11:12

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

Toryudo
****

Masculin
Messages : 426
Inscrit(e) le : 31/03/2020

Voir le profil de l'utilisateur https://deus-academia.forumactif.com/
Toryudo a été remercié(e) par l'auteur de ce sujet.

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

Message par Swidix Lun 27 Déc 2021 - 11:31

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

Swidix
Nouveau membre

Messages : 13
Inscrit(e) le : 04/12/2021

Voir le profil de l'utilisateur https://lspd-online.forumactif.com
Swidix a été remercié(e) par l'auteur de ce sujet.
  • 0

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

Message par Toryudo Lun 27 Déc 2021 - 11:44

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

Toryudo
****

Masculin
Messages : 426
Inscrit(e) le : 31/03/2020

Voir le profil de l'utilisateur https://deus-academia.forumactif.com/
Toryudo a été remercié(e) par l'auteur de ce sujet.
  • 0

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

Message par Swidix Lun 27 Déc 2021 - 12:04

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

Swidix
Nouveau membre

Messages : 13
Inscrit(e) le : 04/12/2021

Voir le profil de l'utilisateur https://lspd-online.forumactif.com
Swidix a été remercié(e) par l'auteur de ce sujet.

Voir le sujet précédent Voir le sujet suivant Revenir en haut

- Sujets similaires

Permission de ce forum:
Vous ne pouvez pas répondre aux sujets dans ce forum