web-dev-qa-db-fra.com

Les entrées de case à cocher ne postent-elles que les données si elles sont cochées?

Est-ce un comportement standard pour les navigateurs d’envoyer les données de valeur d’entrée des cases à cocher si elles sont cochées lors de la soumission du formulaire?

Et si aucune donnée de valeur n'est fournie, la valeur par défaut est-elle toujours "activée"?

En supposant que ce qui précède est correct, ce comportement est-il cohérent sur tous les navigateurs?

htmlinputcheckbox
165
Mark

Oui, le comportement standard est que la valeur n'est envoyée que si la case à cocher est cochée. Cela signifie généralement que vous devez avoir une façon de vous souvenir des cases à cocher que vous attendez côté serveur car toutes les données ne proviennent pas du formulaire.

La valeur par défaut est toujours "on", cela devrait être cohérent entre les navigateurs.

Ceci est couvert dans la recommandation du W3C HTML 4 :

Les cases à cocher (et les boutons radio) sont des boutons d'activation/désactivation que l'utilisateur peut basculer. Un commutateur est "activé" lorsque l'attribut vérifié de l'élément de contrôle est défini. Lorsqu'un formulaire est soumis, seuls les contrôles de case à cocher "sur" peuvent réussir.

167
John C

En HTML, chaque élément <input /> est associé à une seule paire nom/valeur (mais pas unique). Cette paire est envoyée dans la requête suivante (dans ce cas, un corps de requête POST) uniquement si le <input /> est "abouti".

Donc, si vous avez ces entrées dans votre <form> DOM:

<input type="text"     name="one"   value="foo"                        />
<input type="text"     name="two"   value="bar"    disabled="disabled" />
<input type="text"     name="three" value="first"                      />
<input type="text"     name="three" value="second"                     />

<input type="checkbox" name="four"  value="baz"                        />
<input type="checkbox" name="five"  value="baz"    checked="checked"   />
<input type="checkbox" name="six"   value="qux"    checked="checked" disabled="disabled" />
<input type="checkbox" name=""      value="seven"  checked="checked"   />

<input type="radio"    name="eight" value="corge"                      />
<input type="radio"    name="eight" value="grault" checked="checked"   />
<input type="radio"    name="eight" value="garply"                     />

Générera ces paires nom + valeur qui seront soumises au serveur:

one=foo
three=first
three=second
five=baz
eight=grault

Remarquerez que:

  • two et six ont été exclus car ils avaient l'attribut disabled.
  • three a été envoyé deux fois car il contenait deux entrées valides portant le même nom.
  • four n'a pas été envoyé car il s'agit d'un checkbox qui n'était pas checked
  • six n'a pas été envoyé alors qu'il était checked car l'attribut disabled a une priorité plus élevée.
  • seven n'a pas d'attribut name="" envoyé, il n'est donc pas soumis.

En ce qui concerne votre question: vous pouvez voir qu'une case à cocher non cochée n'aura donc pas sa paire nom + valeur envoyée au serveur - mais les autres entrées partageant le même nom seront envoyées avec celle-ci.

Des structures telles que ASP.NET MVC contournent ce problème en associant (subrepticement) chaque entrée checkbox à une entrée hidden dans le code HTML rendu, comme suit:

@Html.CheckBoxFor( m => m.SomeBooleanProperty )

Renders:

<input type="checkbox" name="SomeBooleanProperty" value="true" />
<input type="hidden"   name="SomeBooleanProperty" value="false" />

Si l'utilisateur ne coche pas la case, les informations suivantes seront envoyées au serveur:

SomeBooleanProperty=false

Si l'utilisateur coche la case, les deux seront envoyés:

SomeBooleanProperty=true
SomeBooleanProperty=false

Mais le serveur ignorera la version =false car il verra la version =true. Par conséquent, s'il ne voit pas =true, il peut déterminer que la case à cocher a été rendue et que l'utilisateur n'a pas coché. it - contrairement aux entrées SomeBooleanProperty qui ne sont pas restituées.

70
Dai

Si la case à cocher n'est pas cochée, cela ne contribue pas aux données envoyées lors de la soumission du formulaire.

Section HTML5 4.10.22.4 Construction du jeu de données de formulaire décrit la façon dont les données de formulaire sont construites:

Si l'une des conditions suivantes est remplie, ignorez ces sous-étapes pour cet élément: [...]

L'élément de champ est un élément d'entrée dont l'attribut type est à l'état Checkbox et dont la vérification est false.

puis la valeur par défaut on est spécifiée si value est manquant:

Sinon, si l'élément de champ est un élément d'entrée dont l'attribut type est à l'état Checkbox ou à l'état du bouton radio, exécutez ces sous-étapes imbriquées supplémentaires:

Si un attribut value est spécifié pour l'élément de champ, laissez value être la valeur de cet attribut; sinon, laissez value être la chaîne "on".

Ainsi, les cases à cocher non cochées sont ignorées lors de la construction des données de formulaire.

Un comportement similaire est requis sous HTML4 . Il est raisonnable d’attendre ce comportement de la part de tous les navigateurs compatibles.

16
Adam Zalcman

Les cases à cocher affichent une valeur "activée" si et seulement si la case à cocher est cochée. Institué de saisir la valeur de la case à cocher, vous pouvez utiliser des entrées cachées

JS:

var chk = $('input[type="checkbox"]');
    chk.each(function(){
        var v = $(this).attr('checked') == 'checked'?1:0;
        $(this).after('<input type="hidden" name="'+$(this).attr('rel')+'" value="'+v+'" />');
    });

chk.change(function(){ 
        var v = $(this).is(':checked')?1:0;
        $(this).next('input[type="hidden"]').val(v);
    });

HTML:

<label>Active</label><input rel="active" type="checkbox" />
10
Lanister

Est-ce un comportement standard pour les navigateurs d’envoyer les données de valeur d’entrée des cases à cocher si elles sont cochées lors de la soumission du formulaire?

Oui, car sinon, il n'y aurait aucun moyen solide de déterminer si la case à cocher était réellement cochée ou non (si elle modifiait la valeur, le cas pourrait exister lorsque la valeur désirée, si elle était cochée, serait la même que celle qui était cochée. permuté à).

Et si aucune donnée de valeur n'est fournie, la valeur par défaut est-elle toujours "activée"?

D'autres réponses confirment que "activé" est la valeur par défaut. Cependant, si la valeur ne vous intéresse pas, utilisez simplement:

if (isset($_POST['the_checkbox'])){
    // name="the_checkbox" is checked
}
8
Jay

De HTML 4 spec, qui devrait être cohérent sur presque tous les navigateurs:

http://www.w3.org/TR/html401/interact/forms.html#checkbox

Les cases à cocher (et les boutons radio) sont des boutons d'activation/désactivation que l'utilisateur peut basculer. Un commutateur est "activé" lorsque l'attribut vérifié de l'élément de contrôle est défini. Lorsqu'un formulaire est soumis, seuls les contrôles de case à cocher "sur" peuvent réussir.

Le succès est défini comme suit:

Un contrôle réussi est "valide" pour la soumission. Chaque contrôle réussi a son nom de contrôle associé à sa valeur actuelle dans le jeu de données de formulaire soumis. Un contrôle réussi doit être défini dans un élément FORM et doit avoir un nom de contrôle.

7
Alex W

type d'entrée = "caché" name = "is_main" valeur = "0"

type d'entrée = "case à cocher" name = "is_main" valeur = "1"

afin que vous puissiez contrôler comme ceci comme je l'ai fait dans l'application. s'il vérifie alors envoyez la valeur 1 sinon 0

4
Muhammad Amir Shahzad

Aucune des réponses ci-dessus ne m'a satisfait. J'ai trouvé la meilleure solution consiste à inclure une entrée cachée avant chaque entrée de case à cocher avec le même nom.

<input type="hidden" name="foo[]" value="off"/>

<input type="checkbox" name="foo[]"/>

Ensuite, côté serveur, en utilisant un petit algorithme, vous pouvez obtenir quelque chose de plus similaire à HTML.

function checkboxHack(array $checkbox_input): array
{
    $foo = [];
    foreach($checkbox_input as $value) {
        if($value === 'on') {
            array_pop($foo);
        }
        $foo[] = $value;
    }
    return $foo;
}

Ce sera l'entrée brute

array (
    0 => 'off',
    1 => 'on',
    2 => 'off',
    3 => 'off',
    4 => 'on',
    5 => 'off',
    6 => 'on',
),

Et la fonction va revenir

array (
    0 => 'on',
    1 => 'off',
    2 => 'on',
    3 => 'on',
)
3
Cobolt

J'ai une page (formulaire) qui génère dynamiquement une case à cocher, donc ces réponses ont été d'une grande aide. Ma solution ressemble beaucoup à beaucoup d'autres ici, mais je ne peux m'empêcher de penser qu'elle est plus facile à mettre en œuvre.

Tout d’abord, je mets une zone de saisie masquée en ligne avec ma case à cocher, c’est-à-dire.

 <td><input class = "chkhide" type="hidden" name="delete_milestone[]" value="off"/><input type="checkbox" name="delete_milestone[]"   class="chk_milestone" ></td>

Désormais, si tous les checkboxes ne sont pas sélectionnés, les valeurs renvoyées par le champ masqué seront toutes désactivées.

Par exemple, avec cinq cases à cocher insérées dynamiquement, la forme POSTS les valeurs suivantes:

  'delete_milestone' => 
array (size=7)
  0 => string 'off' (length=3)
  1 => string 'off' (length=3)
  2 => string 'off' (length=3)
  3 => string 'on' (length=2)
  4 => string 'off' (length=3)
  5 => string 'on' (length=2)
  6 => string 'off' (length=3)

Cela montre que seules les 3ème et 4ème cases sont on ou checked.

Essentiellement, le champ de saisie factice ou masqué indique simplement que tout est désactivé, sauf s'il existe un "activé" en dessous de l'index désactivé, ce qui vous donne ensuite l'index dont vous avez besoin sans une seule ligne de code côté client.

.

1
Alexander

Tout comme la variante ASP.NET, sauf que l'entrée cachée portant le même nom est placée avant la case à cocher réelle (du même nom). Seules les dernières valeurs seront envoyées. Ainsi, si une case est cochée, son nom et sa valeur "on" sont envoyés, alors que si elle est décochée, le nom de l'entrée masquée correspondante et la valeur que vous souhaitez lui attribuer seront envoyés. En fin de compte, vous obtiendrez le tableau $ _POST à ​​lire, avec tous les éléments cochés et non cochés, les valeurs "on" et "false", aucune clé dupliquée. Facile à traiter en PHP.

0
user3124825

Ayant le même problème avec les cases à cocher non cochées qui ne seront pas envoyées lors de la soumission des formulaires, je suis sorti avec une autre solution que de reproduire les éléments de case à cocher.

Obtenir toutes les cases décochées avec

var checkboxQueryString;

$form.find ("input[type=\"checkbox\"]:not( \":checked\")" ).each(function( i, e ) {
  checkboxQueryString += "&" + $( e ).attr( "name" ) + "=N"
});
0
Maugo