JavaScript - Récupérer valeurs input

jean66 · 6 Février 2015

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.

loubet · 6 Février 2015

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.

cduray · 6 Février 2015

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>

jean66 · 6 Février 2015

Bonjour,

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

Bonne Journée!