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 ?