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!

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
Recuperer page en cours javascript/php	Développement d'un site Web ou d'une appli mobile	1 Novembre 2009
Récuperer la requette http en javascript et php	Développement d'un site Web ou d'une appli mobile	27 Septembre 2009
Récupérer la variable javascript	Développement d'un site Web ou d'une appli mobile	6 Février 2009
Récupérer valeur champ en javascript	Développement d'un site Web ou d'une appli mobile	23 Avril 2008
Pages dynamiques avec Javascript ?	Développement d'un site Web ou d'une appli mobile	14 Juillet 2022
[JavaScript Array] modifier un code html sans le supprimer/recréer	Développement d'un site Web ou d'une appli mobile	20 Juin 2022
Le javascript protège-t-il du copiage HTML ?	Développement d'un site Web ou d'une appli mobile	9 Mai 2022
Tester une URL avec Javascript	Développement d'un site Web ou d'une appli mobile	25 Février 2022
jour en javascript	Développement d'un site Web ou d'une appli mobile	24 Février 2022
référencement site full javascript	Débuter en référencement	17 Janvier 2022
Javascript et preloader	Référencement Google	16 Septembre 2021
Javascript API cache query non url ?	Développement d'un site Web ou d'une appli mobile	18 Août 2021
Comment lancer du Javascript sans html ?	Développement d'un site Web ou d'une appli mobile	28 Avril 2021
Pop up javascript + cookie	Développement d'un site Web ou d'une appli mobile	3 Février 2021
Du php dans du javascript	Développement d'un site Web ou d'une appli mobile	16 Novembre 2020