Recupération de valeurs de checkbox avec JQUERY

Répondre


Cette question est un moyen d’empêcher des soumissions automatisées de formulaires par des robots.
Smileys
:D :) :( :o :shock: :? 8-) :lol: :x :P :oops: :cry: :evil: :twisted: :roll: :wink: :!: :?: :idea: :arrow: :| :mrgreen: =D> #-o =P~ :^o :non: :priere: 8-|
Voir plus de smileys
  Revue du sujet
 

  Étendre la vue Revue du sujet : Recupération de valeurs de checkbox avec JQUERY

Re: Recupération de valeurs de checkbox avec JQUERY

par BaLiSTiK » 26 févr. 2010, 10:33

La solution donnée par Calimero fonctionne tres bien.
Voila ma function au final, qui me permet d'écrire une ligne CSS (qui est rajoutée dans un CSS en PHP).

Code : Tout sélectionner

function verifSyntaxeCssBody(){ var couleurBg = $('#couleurBg').val(); var position = ""; $("input:checkbox:checked").each(function(){ position = position.concat(' ' + $(this).val()); } ); if(position != ""){ var syntaxe = 'body{ background: url(\'../../images/fond.jpg\') ' + couleurBg + position + '; }'; $('#verifSyntaxe').val(syntaxe); $('#verifSyntaxeSpan').text(syntaxe); // + '; }'); }else{ var syntaxe = 'body{ background: '+couleurBg+'; }'; $('#verifSyntaxe').val(syntaxe); $('#verifSyntaxeSpan').text(syntaxe); } }
Donc grand merci :).

@AB : Je suis d'accord avec toi qu'il faut apprendre les bases avant de se lancer dans des biblioetheques d'un niveau au dessus, mais je me réalise un projet assez gros et donc, j'ai besoin de JQUERY pour appliquer certaines choses assez rapidement, mais ça n'empêche que j'apprends quand même :).

Donc merci à vous deux pour les réponses et conseils :)

Re: Recupération de valeurs de checkbox avec JQUERY

par AB » 25 févr. 2010, 00:02

Je suis un peu à la ramasse en JS et je débute tout juste avec JQuery je confesse ^^.
C'est bien là le problème :) Une librairie n'est facilement utilisable qu'à la condition d'avoir des notions suffisantes. Continues d'utiliser jquery, mais essaies de revenir un peu plus sur les fondamentaux, cela t'aideras dans tous les cas y compris pour jquery :wink:

Re: Recupération de valeurs de checkbox avec JQUERY

par Calimero » 24 févr. 2010, 23:49

Oké, si je comprends bien, mon tableau de N éléments corresponds à : $("[:checkbox]:checked") qui contient les checkboxes cochées.
Tout à fait =D>

Bon, chez moi par contre ton sélecteur [:checkbox] n'est pas bien reconnu et provoque une erreur (cf doc de checkbox et doc de checked ), j'ai corrigé pour toi :

Code : Tout sélectionner

$("input:checkbox:checked").each(function(){ //... });
Puis dans le each, pour trouver chacune de ces checkbox tu fais actuellement ça :

Code : Tout sélectionner

$("[:checkbox]:checked").val()
On oublie ici le sélecteur puisqu'on est dans une boucle (qui passe donc, un par un, sur une liste de trucs déjà choisis avant), on utilise simplement $(this) qui est notre "variable curseur" (cf doc de each() ) pour jQueryser le noeud DOM courant:

Code : Tout sélectionner

$(this).val()
Ca devrait marcher un peu mieux après ;) Tiens-nous au courant (et va quand même lire le manuel stp, tous mes liens sont 100% faits à la main :lol: )

PS: Tu peux aussi jeter un oeil à la méthode serialize() qui peut être intéressante pour toi.

Re: Recupération de valeurs de checkbox avec JQUERY

par BaLiSTiK » 24 févr. 2010, 22:36

Oké, si je comprends bien, mon tableau de N éléments corresponds à : $("[:checkbox]:checked") qui contient les checkboxes cochées.
Il me manque donc la fonction qui récupère la valeur de chaque checkbox, que je tentais d'accéder par la fonction val().
Ce que je tente de faire, c est à chaque tour de boucle, récupérer la valeur de la checkbox et la mettre dans une variable qui se concatène pour avoir au final, dans cette variable toutes les valeurs des checkboxes.
C est là ou ça bloque. Je ne vois pas comment récupérer la variable à chaque tour de boucle :/

Re: Recupération de valeurs de checkbox avec JQUERY

par Calimero » 24 févr. 2010, 21:38

Pas de souci, si je t'ai pas donné la réponse tout de suite c'est simplement pour aiguiser ton sens de l'observation :P

Bien tenté, mais non c'est pas fonction(), avec ou sans paramètres cela revient à la même chose.

La méthode each() est une sorte de boucle (qui ne s'écrit pas comme une boucle). On prend un tableau de N éléments (c'est d'ailleurs exactement ce que représente le code jQuery suivant ) :

Code : Tout sélectionner

$(ici_on_peut_avoir_un_selecteur_css_ou_un_noeud_DOM)
Et à chacun de ces éléments, pris séparément, on applique une fonction censée faire quelquechose d'utile (la plupart du temps, sur cet élément).

Ce qui est présent dans les exemples, et pas dans ton code, c'est la façon d'accéder à l'élément courant depuis l'intérieur de la boucle ;)

Est-ce que ça t'aide un peu ?

Re: Recupération de valeurs de checkbox avec JQUERY

par BaLiSTiK » 24 févr. 2010, 20:36

Je suis un peu à la ramasse en JS et je débute tout juste avec JQuery je confesse ^^.

D'apres les exemples de codes, à part que dans mon code, il n y a pas de parametres dans fonction(), je ne vois pas. là vient le soucis ?

Re: Recupération de valeurs de checkbox avec JQUERY

par Calimero » 24 févr. 2010, 19:35

Salut,

une petite révision du fonctionnement de la méthode each() de jquery peut faire des miracles ;-)

http://api.jquery.com/each/

(regarde bien ce qui est en commun dans tous les exemples de la page du manuel, et absent dans le code que tu nous a copié, qui pourrait expliquer ton souci. Tu trouves ?).

Recupération de valeurs de checkbox avec JQUERY

par BaLiSTiK » 24 févr. 2010, 18:24

Bonjour,
J ai un petit soucis avec ma fonction Javascript permettant de recupérer plusieurs valeurs de balises chechbox.
Par exemple, si j'en coches 2 (il y en a 9 au total), "Haut" et "Droite" par exemple,mon script sait bien qu'il y a 2 valeurs mais les 2 auront la valeur de la premiere.
Ainso, au lieu de trouver "top" et "righ", il me sort "top" et "top"
Mon script permet de génerer des propriétés CSS.
exemple :
<p>
Positionnement de l'image :
<?php
	$positionnement = array('top' => 'Haut', 'right' => 'Droite', 'bottom' => 'Bas', 'left' => 'Gauche');
	foreach($positionnement as $key => $value){
		echo '<input id="'.$key.'" type="checkbox" name="positionnement" value="'.$key.'" />&nbsp;'.$value . '<br />';
	}	
?> 
</p>
<p>Couleur de fond (en hexad&eacute;cimal, ex : #ffffff) :<br />
<input type="text" id="couleurBg" name="couleurBg" size ="40" /> 

<input type="hidden" id="verifSyntaxe" size="60" name="syntaxeBodyCSS" />
<span id="verifSyntaxeSpan" style="color : #000000;"></span>

<input type="button" name="btnVerifPos" value="Generer" onclick="verifSyntaxeCssBody()" />
</p>
Quand je clique sur le bouton, le code CSS s'affiche dans un span (pour verifier la syntaxe) et aussi dans un champ Hidden. Ainsi apres avec ça, je créé un fichier CSS

et ma fonction JS :

Code : Tout sélectionner

function verifSyntaxeCssBody(){ var couleurBg = $('#couleurBg').val(); var position = ""; $("[:checkbox]:checked").each( function(){ position = position.concat(' ' + $("[:checkbox]:checked").val()); } ); if(position != ""){ var syntaxe = 'body{ background-url(\'fond.jpg\') ' + couleurBg + position + '; }'; $('#verifSyntaxe').val(syntaxe); $('#verifSyntaxeSpan').text(syntaxe); // + '; }'); }else{ var syntaxe = 'body{ background: '+couleurBg+'; }'; $('#verifSyntaxe').val(syntaxe); $('#verifSyntaxeSpan').text(syntaxe); } }
Thx ^^