Discussion :

[lcoulon]

Bonjour,

Je cherche à créer une checkbox qui enverrait le formulaire de façon systématique

J'ai besoin que :

si la checkbox n'etait pas cochée au chargement de page et l'utilisateur la coche, on envoi : /in-out.htm?id=1&fav=1
si la checkbox etait cochée au chargement de page et l'utilisateur la décoche, on envoi : /in-out.htm?id=1&fav=0


L'état initial de la checkbox au chargement de la page est donné par le contenu de la variable : ~sensor_favorite(1)~
cette variable prend pour valeur : checked ou unchecked

J'ai essayé ceci mais ça ne fonctionne pas correctement, pouvez vous me dire ce qui ne va pas svp ?

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
6
7
8
9
10
11
 
     	<form method="get" action="in-out.htm">
 
        <!-- envoi /in-out/in-out.htm?id=1 //-->
        <input name="id" value="1" type="hidden">
 
        <!-- envoi automatique de /in-out/in-out.htm?id=1&fav=1  ou  /in-out/in-out.htm?id=1&fav=0  //-->	
	<!-- Checkbox envoi '1' si cochée ou '0' si non cochée //-->
	<input name="fav" value="0" type="hidden">
	<input onclick="this.previousSibling.value=1-this.previousSibling.value" onclick="this.form.submit()" type="checkbox" ~sensor_favorite(1)~>
	</form>

[Invité]

Bonjour,

1/ tu as 2 onclick. Il en faut 1 seul.

2/ les input sont des balises fermantes : <input ............. />.

3/ Lire : element.previousSibling *

Notes

Les navigateurs basés sur Gecko insèrent des nœuds texte dans un document pour représenter des espaces vides dans le balisage source.
Par conséquent, un nœud obtenu par exemple via Node.firstChild ou Node.previousSibling peut faire référence à un nœud texte contenant des espaces plutôt qu'au véritable élément que l'auteur comptait obtenir.

Ca devrait fonctionner en collant les 2 input :

Code html :

Sélectionner tout - Visualiser dans une fenêtre à part

<input name="fav" value="0" type="hidden" /><input onclick="this.previousSibling.value=1-this.previousSibling.value;this.form.submit();" type="checkbox" ~sensor_favorite(1)~ />

Ou, plus simplement / sûrement, en utilisant un id.

Code html :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
<input id="idfav" name="fav" value="0" type="hidden" />
<input onclick="document.getElementById('idfav').value=1-document.getElementById('idfav').value;this.form.submit();" type="checkbox" ~sensor_favorite(1)~ />

* : j'ai trouvé ce lien en effectuant une simple RECHERCHE
Autrement dit : tu aurais pu effectuer cette RECHERCHE toi-même.

D'autre part, UN SIMPLE TEST m'a mis la voie :

Code html :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
<input id="idfav" name="fav" value="0" type="text" />
<input onclick="alert( this.previousSibling.value );" type="checkbox" />

Idem : tu aurais pu effectuer ce SIMPLE TEST toi-même.

Bref : il faut faire preuve d'INITIATIVE et de CURIOSITE.

[lcoulon]

Merci,

Pour le moment le formulaire envoi bien automatiquement fav=1 lorsqu'on coche la checkbox, mais il n’envoie pas fav=0 lorsqu'on la décoche.

Pouvez vous me dire pourquoi ?

[Invité]

1/ Je t'ai montré comment tester.

A toi de jouer.


2/

L'état initial de la checkbox au chargement de la page est donné par le contenu de la variable : ~sensor_favorite(1)~
cette variable prend pour valeur : checked ou unchecked

Là , je suis curieux de savoir comment tu fais pour appliquer (au chargment de page) la value( 0 ou 1) de l'<input name="fav"...> avec ça ??

[lcoulon]

Afin de tester, j'ai remis un bouton submit et l'alerte.
le serveur connait la valeur contenue dans ~sensor_favorite(1)~, cette variable est 0 ou 1

donc mon idée est que si l'utilisateur ne touche pas à la checkbox, la valeur initiale de la checkbox : ~sensor_favorite(1)~ est conservée
c'est que j'essai de faire avec la ligne :

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

<input id="idfav" name="fav" value="~sensor_favorite(1)~" type="hidden" />

si l'utilisateur coche ou décoche la checkbox ( onclick ) alors on enverra un état qui sera : 1 - état initial, soit 1 - ~sensor_favorite(1)~

si tout cela fonctionne, le but final est de retirer le bouton submit afin que le formulaire soit envoyé, et donc l'état de la checkbox modifié uniquement si l'utilisateur coche ou décoche celle ci.

Actuellement, l'état initial de la checkbox représenté par la variable ~sensor_favorite(1)~ est correct au chargement de la page ( testé ok )

- si la checkbox est décochée et que l'utilisateur la coche et envoi le formulaire, celle-ci devient coché ( testé ok )

par contre l'inverse ne fonctionne pas :
- si la checkbox est cochée au chargement de la page et que l'utilisateur la décoche puis envoi le formulaire, la checkbox reste cochée.

La fenetre d'alerte me donne l'état lors du clic, mais elle m'affiche "ON" ça ne m'aide pas vraiment en fait.

Merci a vous pour votre aide,

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
6
 
<form method="get" action="in-out.htm">
<input id="idfav" name="fav" value="~sensor_favorite(1)~" type="hidden" />
<input onclick="document.getElementById('idfav').value = 1 - document.getElementById('idfav').value ; alert(this.value);" type="checkbox" ~sensor_favorite(1)~/>
<input value="SAVE" type="submit">
</form>

[Invité]

Bonjour,

On peut visualiser en mettant type="text" à la place de type="hidden" :

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

<input id="idfav" name="fav" value="~sensor_favorite(1)~" type="text" />

-> As-tu vérifié qu'au chargement de la page, l'input a la bonne valeur (1 ou 0) ?
-> QUEL est le code HTML généré ?

Tu n'as que 2 cas de figure :

Case cochée :

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
<form method="get" action="in-out.htm">
  <input id="idfav" name="fav" value="1" type="hidden" />
  <input onclick="document.getElementById('idfav').value = 1 - document.getElementById('idfav').value ; alert(document.getElementById('idfav').value);" type="checkbox" checked="checked" />
</form>

ou case décochée :

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
<form method="get" action="in-out.htm">
  <input id="idfav" name="fav" value="0" type="hidden" />
  <input onclick="document.getElementById('idfav').value = 1 - document.getElementById('idfav').value ; alert(document.getElementById('idfav').value);" type="checkbox" />
</form>

Est-ce bien ce que le code HTML généré te donne ?

[NoSmoking]

Bonjour,

...mais il n’envoie pas fav=0 lorsqu'on la décoche.

lors de la soumission d'un <form> seuls les checkbox « cochés » sont envoyés, c'est la règle on ne la changera pas, mais tu peux passer par des <input type="radio">.

[Invité]

@NoSmoking

c'est justement pour ça qu'il "contourne le problème" en passant par :

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

<input id="idfav" name="fav" value="0" type="hidden" />

(vu dans une précédente discussion)

[lcoulon]

oui, mais je cherche a envoyer le formulaire à chaque fois que l'utilisateur va changer l'état initial de la checkbox en cochant ou décochant celle-ci :

- si checkbox n'était pas cochée, l'utilisateur la coche : formulaire envoyé avec comme value l'inverse de l'état initial
- si la checkbox était cochée, l'utilisateur la décoche : formulaire envoyé avec comme value l'inverse de l'état initial

Cela implique que le code JS lise le contenu de la valeur initiale de présent dans : ~sensor_favorite(1)~
je pense qu'il faut faire une sorte de if et ensuite un XOR ( avec quelquechose comme ^= 1 )

J'ai essayé pas mal de choses et je n'y arrive pas.

[Invité]

En fait, pourquoi se compliquer la vie ?

La solution est simple.

1/ le form :

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
<form method="get" action="in-out.htm">
  <input id="idfav" name="fav" value="0 ou 1 (en fonction de ta variable ~sensor_favorite(1)~)" type="checkbox" onclick="form.submit();"/>
</form>

2/ dans le script de traitement :

Code php :

Sélectionner tout - Visualiser dans une fenêtre à part

$fav = ( !empty($_GET['fav']) )? $_GET['fav'] : 0 ;

Ca évite toutes ces tracasseries !


N.B. Comme le dit NoSmoking : c'est le comportement normal d'une checkbox...
... et la façon "normale" de récupérer sa valeur.

D'autre part : passer le form en POST fonctionnerait pareil (à part afficher en clair les variables dans l'URL !)

=> il faudrait peut-être REPENSER la CONCEPTION.

[NoSmoking]

c'est justement pour ça qu'il "contourne le problème" en passant par :...

j’entends bien mais à la vue de l'énoncé je pense qu'il fait fausse route, comme sur ses autres discussions, pour lesquelles il ne prend d'ailleurs pas la paine de répondre , et c'est lorsque l'on connait le fonctionnement d'un « objet » qu'il est le plus facile de le réparer.

Pour moi cela se règle avec un simple

Code html :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
<form action="">
  <input type="radio" name="fav" value="0" onchange="this.form.submit()">
  <input type="radio" name="fav" value="1" onchange="this.form.submit()">
</form>

avec une gestion classique coté serveur du check/uncheck.

[Invité]

Du coup, je trouve ma "solution simple" plutôt... simple, non ?

[lcoulon]

J'ai rajouté coté serveur 1 variable supplémentaire afin de permettre le bon affichage de l'état de la checkbox : cochée ou décochée
ainsi, les 2 variables prennent pour valeurs :

~sensor_favorite(1)~ = "checked" ou ~sensor_favorite(1)~ = "" (rien)
~sensor_favorite_state(1)~ = "1" ou ~sensor_favorite_state(1)~ = "0"

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
		<form method="get" action="in-out.htm"><!--//-->	
		<input name="id" value="1" type="hidden">		
		<input id="idfav" name="fav" value="~sensor_favorite_state(1)~" type="checkbox" onclick="form.submit();" ~sensor_favorite(1)~/>
		</form>

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
<?php
$fav = ( !empty($_GET['fav']) )? $_GET['fav'] : 0 ;
?>

Pour autant ça ne fonctionne toujours pas, à chaque fois que la page est chargée la checkbox est décochée, donc ~sensor_favorite_state(1)~ est remplacée par "0" et lorsqu'on clique sur la checkbox la case se coche un instant au départ du formulaire mais au refresh de la page celle ci redevient décochée.

[NoSmoking]

Du coup, je trouve ma "solution simple" plutôt...

Avant la « simplification » et/ou l'optimisation, il me semble qu'il faille mettre en avant la compréhension, ce qui ne m’apparait pas être le cas ici.
Commençons toujours par faire de façon claire et cohérente, quitte à être verbeux, avant de simplifier, voire optimiser, ce ne sont pas les exemples alambiqués qui manquent sur ce forum !

L'usage des <input type="checkbox">, plutôt associé à un choix multiple, ne me paraît pas judicieux dans ce cas, dans le sens où l'état coché peut prendre la valeur OUI/NON. Pour moi coché c'est OUI et non coché c'est NON, c'est aussi simple que cela et depuis le siècle dernier.

Si l'on veut proposer un choix clair et non ambiguë à mon sens les <input type="radio"> sont plus indiqués.

D'aucuns diront que les <input type="radio"> ne sont pas visuellement sympa mais avec l'apport du CSS3, entre autre, cela n'est plus vraiment vrai.

L'alternative dans le cas présent serait d'avoir un dialogue avec le serveur via Ajax, envoi sur chaque clic de la valeur de l'état, auquel cas l'interface deviendrait de nouveau cohérente.

[Invité]

Si l'on veut proposer un choix clair et non ambiguë à mon sens les <input type="radio"> sont plus indiqués.

[lcoulon]

Pourquoi mon formulaire est envoyé que lorsque l'utilisateur coche la checkbox et non pas quand il la décoche ?

ce que je cherche à faire est simple mais dans les faits cela semble bien compliqué à réaliser :

si la checkbox est non cochée au départ, l'utilisateur la coche : on envoie 'A' -> /in-out.htm?id=1&fav=A
si la checkbox est cochée au départ, l'utilisateur la décoche : on envoie 'B' -> /in-out.htm?id=1&fav=B

Pouvez m'aider à faire ce petit bout de code svp ?
je ne veux pas de radiobouton pour réaliser cela.

[Invité]

Bonjour,
Tu n'apportes rien de nouveau.
Pas même du code.

1/
~sensor_favorite(1)~
~sensor_favorite_state(1)~
C'est quel langage ?? Je ne connais pas...

2/ Je t'ai donné des infos ici, et une réponse simple ici.

3/ Le minimum serait déjà que tu REPONDES à nos questions...

4/ Dire "Bonjour" et "merci" est facultatif, mais vivement recommandé.

[lcoulon]

Bonjour,

~sensor_favorite(1)~ est une variable interprétée par un code AJAX qui va remplacer celle ci par une valeur, car derriere il y une carte electronique qui fonctionne en C embarqué.

Le code que tu m'as proposé envoie en effet un '1' ou '0' mais si je veux envoyer 'A' ou 'B' à la place en fonction que la checkbox soit clickée ou déclickée, il faut le modifier complétement et je ne vois pas comment faire.

Désolé de ne pas etre très clair dans les réponse apportées, je débute avec javascript.

Merci à vous tous,

[Invité]

C'est surtout que tu ne fais pas beaucoup d'efforts pour chercher...
... et que ça n'a pas de rapport avec JavaScript.

Code php :

Sélectionner tout - Visualiser dans une fenêtre à part

$fav = ( isset($_GET['fav']) && $_GET['fav']=='A')? 'A' : 'B' ;

ou juste :

Code php :

Sélectionner tout - Visualiser dans une fenêtre à part

$fav = ( !empty($_GET['fav']) )? 'A' : 'B' ;

[lcoulon]

Bonsoir,

Le formulaire fonctionne lors qu'on coche la checkbox, mais il n'envoi pas 'B' si celle ci était cochée au départ puis décochée par l'utilisateur.

Peut etre ai je mal interprété ton exemple ?

Ci joint mon fichier text HTML.

Merci à vous,