11548 sujets

JavaScript, DOM et API Web HTML5

Bonjour,

Je viens vers vous, car je sèche depuis plusieurs heures et je ne vois pas comment m'en sortir.

Dans un formulaire, je crée des checkbox, permettant de relier l'enregistrement en cours à 1,n pays. Ces informations seront stockées dans une table de relation (id de l'enregistrement / id du pays).

J'ai donc créer dans mon formulaire une liste de checkbox :

<div id =listpays">
	<ul class="checklist">
		<li>
			<label><input id="p1" type="checkbox" value="1" name="pays[]">France</label>
		</li>	
		<li>	
			<label><input id="p2" type="checkbox" value="2" name="pays[]">Royaume Uni</label>
		</li>	
		<li>	
			<label><input id="p3" type="checkbox" value="3" name="pays[]">Belgique</label>
		</li>		
		<li>	
			<label><input id="p4" type="checkbox" value="4" name="pays[]">Italie</label>
		</li>			
	</ul>	
</div>

La zone value correspond à l'id du code pays

A chaque click de la checkbox, je souhaiterais afficher le nom du pays associé.

Problème, si j'alimente la zone value par le nom du pays, je ne pourrais pas alimenter ma table de relation.
Si je met le nom du pays dans la zone name, j'aurais des soucis lors du traitement PHP
... et là je sèche. Je suis preneur de toutes idée Smiley ravi

Le code Jquery que j'utilise pour récupérer la zone texte est la suivante :

  $(document).ready(function() {  
	  $("#listpays").click(function() {
                $("#listpays :checked").each(function() {
                    alert("value = " + $(this).val());
            });
		});	
  });

Modifié par Babali (23 Aug 2011 - 16:23)
J'ai été confronté à un problème similaire.

La solution que j'ai trouvé a été de "codé" mes informations dans la zone "value".

On peu imaginer dans ton cas de mettre comme donnée dans cette zone ceci:
value="001.France"

du coup grace à une REGEX, ou plus simple, un substring, tu récupères l'ID ainsi que le nom du pays.
Je suis parti sur le même type de réflexion.

J'ai rajouté un input de type hidden


<li>	
    <label><input id="p2" type="checkbox" value="2" name="pays[]">Royaume Uni</label>
<input type="hidden"  name="ValueToList" id="vp2" value="Royaume Uni"/>
</li>	


Côté JS Jquery, je recherche la valeur affecté à l'input caché en fonction de l'id de la checkbox.


  $(document).ready(function() { 	  
	  $("#selectpy").click(function() {
	  var valuetolist='';
                $("#selectpy :checked").each(function() {
			var id = $(this).attr('id'); // récupération de l'id de la checkbox
			var valtolist = document.getElementById('v'+id).value // recherche la valeur de "l'input caché" associé à la checkbox
			valuetolist = valuetolist + valtolist + ', '; // concaténation des valeurs sélectionnées
            });
			var valuetoprint = document.getElementById('lst_selectpy') ;
			valuetoprint.innerHTML=valuetolist;
		});	
  });


Bon, je ne sais pas si c'est le plus pertinent, mais cela fonctionne pour moi Smiley biggrin