JavaScript - Récupérer valeurs input

Discussion dans 'Développement d'un site Web ou d'une appli mobile' créé par jean66, 6 Février 2015.

  1. jean66
    jean66 Nouveau WRInaute
    Inscrit:
    6 Février 2015
    Messages:
    2
    J'aime reçus:
    0
    Bonjour à tous!

    Je bloque depuis pas mal de temps sur un problème lié à la récupération des valeurs en utilisant le JS.

    Dans une liste de choix à sélectionner, j'ai un script qui me récupère qu'une valeur. Et je souhaiterais récupérer toutes les valeurs sélectionnées (<li id="valeur">Choix<li>).

    Code:
    <input name="result" id="result" type="hidden" />
     
     
     
    	<div id="bouton">
     
      <ul>
     
        <li id="Choice 1">Choice 1</li>
     
        <li id="Choice 2">Choice 2</li>
     
        <li id="Choice 3">Choice 3</li>
     
        <li id="Choice 4">Choice 4</li>
     
        </ul>
     
    </div>
     
     
     
     
    <script>
    $(document).ready(function() {
      $(function(){
        $(‘#bouton ul li').click(function(){
          window.choice = this.id; 
          //$('bouton ul li').removeClass('selected'); 
          $(this).addClass('selected');
          }); 
     
          $('#bouton ul li').mouseover(function(){
          $(this).addClass('over');
          });
     
          $('#bouton ul li').mouseout(function(){
          $(this).removeClass('over');
        });
     
      });
    }); 
     
      function setChoice(){
        if(!$(‘#bouton ul li.selected').click()){
          $(‘#result').val(1);
          }else{
            // set the value of the hidden input field
            $(‘#result').val(window.choice);
          }
      }
     
    </script>
    

    Je vous remercie par avance.
     
  2. loubet
    loubet WRInaute impliqué
    Inscrit:
    19 Février 2003
    Messages:
    792
    J'aime reçus:
    0
    je rajouterais un champ <input type="checkbox"> dans chacune des <li>, car ce n'est pas standard avec seulement un <li>, c'est donc compliqué et cela fonctionnera difficilement dans tous les navigateurs.
    avec des <input type="checkbox">, cela redevient standard.
     
  3. cduray
    cduray Nouveau WRInaute
    Inscrit:
    7 Avril 2008
    Messages:
    38
    J'aime reçus:
    0
    Tu as des apostrophes bizarres dans ton code (ça vient du copier/coller ou de ton éditeur?)
    Puis quelques remarques:
    Pourquoi
    Code:
    $(document).ready(function() {
      $(function(){
    [...]
      });
    });
    
    alors que
    Code:
      $(function(){
    [...]
      });
    suffit?

    Pourquoi cet appel à
    Code:
    if(!$('#bouton ul li.selected').click()){
    -> tu triggeres un évènement click sur les li.selected ???

    Enfin, ta fonction setChoice n'est liée à rien (et donc pas exécutée)

    Si ça peut t'aider, voici un code un peu nettoyé (mais loin d'être fini: que fais tu quand on clique sur un second li, etc...):

    Code:
    <html>
    <head>
    <style>
    .selected { background-color: green; }
    </style>
    <script src='http://code.jquery.com/jquery-1.11.2.min.js'></script>
    </head>
    <body>
    result:<input name="result" id="result" type="text" />
    <a href='javascript:setChoice();'>Set choice</a>
       <div id="bouton">
      <ul>
        <li id="Choice 1">Choice 1</li>
        <li id="Choice 2">Choice 2</li>
        <li id="Choice 3">Choice 3</li>
        <li id="Choice 4">Choice 4</li>
        </ul>
    </div>
    
    
    <script>
    $(document).ready(function() {
      $(function(){
        $('#bouton ul li').click(function(e){
          e.stopPropagation();
          window.choice = this.id;
          //$('bouton ul li').removeClass('selected');
          $(this).addClass('selected');
          });
    
          $('#bouton ul li').mouseover(function(){
          $(this).addClass('over');
          });
    
          $('#bouton ul li').mouseout(function(){
          $(this).removeClass('over');
        });
    
      });
    });
    
      function setChoice(){
            // set the value of the hidden input field
            $('#result').val(window.choice);
      }
    
    </script>
    </body>
    </html>
    
     
  4. jean66
    jean66 Nouveau WRInaute
    Inscrit:
    6 Février 2015
    Messages:
    2
    J'aime reçus:
    0
    Bonjour,

    Je vous remercie pour toutes vos réponses. Le problème est désormais résolu.

    Bonne Journée!
     
Chargement...
Similar Threads - JavaScript Récupérer valeurs Forum Date
[résolu] Récupérer des valeurs issues de javascript pour les mettre en base MySQL Développement d'un site Web ou d'une appli mobile 18 Juillet 2016
Code javascript pour récupérer un tableau dans un tableau en retour JSON Développement d'un site Web ou d'une appli mobile 4 Septembre 2016
Récupérer dernière ligne affichée d'une chaîne en Javascript Développement d'un site Web ou d'une appli mobile 17 Décembre 2011
Récupérer variable GET en Javascript Référencement Google 20 Octobre 2011
Recuperer variable javascript dans PHP Développement d'un site Web ou d'une appli mobile 17 Février 2010
Editer document Word avec Javascript Développement d'un site Web ou d'une appli mobile 10 Septembre 2020
Quelle extension Chrome pour expander les liens Javascript Développement d'un site Web ou d'une appli mobile 30 Août 2020
Javascript et duplication de Hn Problèmes de référencement spécifiques à vos sites 21 Août 2020
Quels Outils Javascript pour générer des documents Demandes d'avis et de conseils sur vos sites 21 Juillet 2020
HTML fait par Javascript <=>gérer les Events ? Développement d'un site Web ou d'une appli mobile 5 Juillet 2020