Veröffentlichen Checkbox-Eingaben nur Daten, wenn sie aktiviert sind?

183

Ist es Standard für Browser, die Eingabewertdaten des Kontrollkästchens nur zu senden, wenn sie beim Senden des Formulars aktiviert sind?

Und wenn keine Wertdaten angegeben werden, ist der Standardwert immer "Ein"?

Unter der Annahme, dass das oben Gesagte korrekt ist, ist dieses Verhalten in allen Browsern konsistent?

Kennzeichen
quelle

Antworten:

186

Ja, Standardverhalten ist, dass der Wert nur gesendet wird, wenn das Kontrollkästchen aktiviert ist. Dies bedeutet normalerweise, dass Sie sich merken müssen, welche Kontrollkästchen Sie auf der Serverseite erwarten, da nicht alle Daten aus dem Formular zurückkommen.

Der Standardwert ist immer "Ein". Dies sollte für alle Browser konsistent sein.

Dies wird in der W3C HTML 4-Empfehlung behandelt :

Kontrollkästchen (und Optionsfelder) sind Ein / Aus-Schalter, die vom Benutzer umgeschaltet werden können. Ein Schalter ist eingeschaltet, wenn das geprüfte Attribut des Steuerelements gesetzt ist. Wenn ein Formular gesendet wird, können nur Steuerelemente des Kontrollkästchens "Ein" erfolgreich sein.

John C.
quelle
18
Leider ist das eine schmerzhafte Wahrheit. Es werden nur aktivierte Kontrollkästchen an den Server gesendet, keine nicht aktivierten. Wenn Sie im Voraus wissen, welche Kontrollkästchen auf der Seite vorhanden sind, ist es für das serverseitige Skript kein Problem, sie zu verwalten. Das Problem ist, wenn Sie das nicht im Voraus wissen - dynamisch erstellte Kontrollkästchen auf der Seite, abhängig von einer Geschäftslogik. Dann müssen Sie Tricks machen und parallele ausgeblendete Eingabefelder für diese Kontrollkästchen verwenden und sie mit JavaScript erfüllen.
Sbrbot
Der Schlüssel zum Erstellen eines konsistenten Validators mit "zulässigen erfolglosen Steuerelementen (dh Typ =" Kontrollkästchen ") besteht darin, diese Formularsteuerelemente als vorübergehend zu kennzeichnen . Wenn sie nicht erfolgreich sind, ändern Sie Ihr Desinfektionsmittel und Ihren Validierer dynamisch entsprechend.
Anthony Rutledge
3
Problemumgehung: Verwenden Sie <select>mit zwei Optionen onund off:-)
Andy
82

In HTML ist jedes <input />Element einem einzelnen (aber nicht eindeutigen) Name-Wert-Paar zugeordnet. Dieses Paar wird in der nachfolgenden Anforderung (in diesem Fall einem POST-Anforderungshauptteil) nur gesendet, wenn das <input />"erfolgreich" ist.

Wenn Sie also diese Eingaben in Ihrem <form>DOM haben:

<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"                     />

Generiert diese Name + Wert-Paare, die an den Server gesendet werden:

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

Beachte das:

  • twound sixwurden ausgeschlossen, weil sie das disabledAttribut gesetzt hatten.
  • three wurde zweimal gesendet, da es zwei gültige Eingaben mit demselben Namen hatte.
  • fourwurde nicht gesendet, weil es ein ist checkbox, das nicht warchecked
  • sixwurde nicht gesendet, obwohl checkeddas disabledAttribut eine höhere Priorität hat.
  • sevenEs wurde kein name=""Attribut gesendet, daher wird es nicht gesendet.

In Bezug auf Ihre Frage: Sie können sehen, dass für ein Kontrollkästchen, das nicht aktiviert ist, das Name + Wert-Paar nicht an den Server gesendet wird. Andere Eingaben mit demselben Namen werden jedoch mit ihm gesendet.

Frameworks wie ASP.NET MVC umgehen dies, indem sie (heimlich) jede checkboxEingabe mit einer hiddenEingabe im gerenderten HTML-Code koppeln, wie folgt:

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

Rendert:

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

Wenn der Benutzer das Kontrollkästchen nicht aktiviert, wird Folgendes an den Server gesendet:

SomeBooleanProperty=false

Wenn der Benutzer das Kontrollkästchen aktiviert, werden beide gesendet:

SomeBooleanProperty=true
SomeBooleanProperty=false

Der Server ignoriert die =falseVersion jedoch, da er die =trueVersion sieht. Wenn er sie nicht sieht =true, kann er feststellen, dass das Kontrollkästchen gerendert wurde und der Benutzer es nicht aktiviert hat - im Gegensatz zu den SomeBooleanPropertyEingaben, die überhaupt nicht gerendert wurden.

Dai
quelle
Beachten Sie, dass das Backend ein Array von Werten erhält, wenn Sie mehrere Felder haben, z. B. mit dem zusätzlichen ausgeblendeten Textfeld.
Salami
Es wird nur dann ein Array empfangen, wenn Sie es []am Ende des Eingabenamens verwenden. Standardmäßig wird nur das letzte Element mit diesem Namen gesendet. Solange sich die versteckte Eingabe vor dem Kontrollkästchen befindet, funktioniert es.
Beeglebug
Wenn zwei Felder denselben Namen haben (verstecktes Feld + Kontrollkästchen) und das Kontrollkästchen aktiviert ist, ist der Post-Wert eine durch Kommas getrennte Zeichenfolge der Werte, d. H. so etwas wie "0,1"
ʞᴉɯ
1
@beeglebug Was Sie beschreiben, ist, wie PHP mit Namen und Werten umgeht. Das []Suffix ist nicht Teil der HTML-Spezifikation und wird von Browsern nicht speziell behandelt. Ohne []PHP ist nur der Zugriff auf einen einzelnen Wert (den letzten Wert) anstelle aller Werte möglich.
Dai
1
Die Verwendung der versteckten Eigenschaft, bevor das Kontrollkästchen für mich in allen Browsern funktioniert, die ich mit GET und POST mit PHP getestet habe. Wenn ich es nach dem Kontrollkästchen platzierte, wurde das Ergebnis immer falsch dargestellt.
Adrianwadey
16

Wenn das Kontrollkästchen nicht aktiviert ist, trägt es nicht zu den Daten bei, die beim Senden des Formulars gesendet werden.

HTML5-Abschnitt 4.10.22.4 Das Erstellen des Formulardatensatzes beschreibt die Art und Weise, wie Formulardaten erstellt werden:

Wenn eine der folgenden Bedingungen erfüllt ist, überspringen Sie diese Unterschritte für dieses Element: [...]

Das Feldelement ist ein Eingabeelement, dessen Typattribut sich im Status "Kontrollkästchen" befindet und dessen Prüfung falsch ist.

und dann wird der Standardwert onangegeben, wenn er valuefehlt:

Wenn das Feldelement ein Eingabeelement ist, dessen Typattribut sich im Status "Kontrollkästchen" oder "Optionsfeld" befindet, führen Sie die folgenden weiteren verschachtelten Teilschritte aus:

Wenn für das Feldelement ein Wertattribut angegeben ist, ist value der Wert dieses Attributs. Andernfalls sei value die Zeichenfolge "on".

Daher werden deaktivierte Kontrollkästchen während der Erstellung von Formulardaten übersprungen.

Ein ähnliches Verhalten ist unter HTML4 erforderlich . Es ist vernünftig, dieses Verhalten von allen kompatiblen Browsern zu erwarten.

Adam Zalcman
quelle
10

Kontrollkästchen setzen genau dann den Wert "Ein", wenn das Kontrollkästchen aktiviert ist. Wenn Sie den Kontrollkästchenwert abfangen, können Sie versteckte Eingaben verwenden

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" />
Lanister
quelle
8

Ist es Standard für Browser, die Eingabewertdaten des Kontrollkästchens nur zu senden, wenn sie beim Senden des Formulars aktiviert sind?

Ja, da es sonst keine solide Möglichkeit gibt, festzustellen, ob das Kontrollkästchen tatsächlich aktiviert wurde oder nicht (wenn es den Wert geändert hat, kann der Fall vorliegen, dass Ihr gewünschter Wert, wenn er aktiviert ist, der gleiche ist wie der, der er war getauscht auf).

Und wenn keine Wertdaten angegeben werden, ist der Standardwert immer "Ein"?

Andere Antworten bestätigen, dass "Ein" die Standardeinstellung ist. Wenn Sie jedoch nicht an dem Wert interessiert sind, verwenden Sie einfach:

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

Aus der HTML 4-Spezifikation, die in fast allen Browsern konsistent sein sollte:

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

Kontrollkästchen (und Optionsfelder) sind Ein / Aus-Schalter, die vom Benutzer umgeschaltet werden können. Ein Schalter ist eingeschaltet, wenn das geprüfte Attribut des Steuerelements gesetzt ist. Wenn ein Formular gesendet wird, können nur Steuerelemente des Kontrollkästchens "Ein" erfolgreich sein.

Erfolgreich ist wie folgt definiert:

Eine erfolgreiche Kontrolle ist für die Einreichung "gültig". Bei jedem erfolgreichen Steuerelement wird der Name des Steuerelements mit dem aktuellen Wert als Teil des übermittelten Formulardatensatzes gepaart. Ein erfolgreiches Steuerelement muss innerhalb eines FORM-Elements definiert sein und einen Steuerelementnamen haben.

Alex W.
quelle
5

Eingabetyp = "versteckt" name = "is_main" value = "0"

Eingabetyp = "Kontrollkästchen" name = "is_main" value = "1"

So können Sie wie in der Anwendung steuern. Wenn dies überprüft wird, senden Sie den Wert 1, andernfalls 0

Muhammad Amir Shahzad
quelle
3

Keine der obigen Antworten hat mich zufriedengestellt. Ich fand, dass die beste Lösung darin besteht, vor jeder Checkbox-Eingabe mit demselben Namen eine versteckte Eingabe einzufügen.

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

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

Dann können Sie auf der Serverseite mit einem kleinen Algorithmus etwas bekommen, das HTML eher bieten sollte.

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

Dies ist die Roheingabe

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

Und die Funktion wird zurückkehren

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

Ich habe eine Seite (ein Formular), die dynamisch ein Kontrollkästchen generiert, daher waren diese Antworten eine große Hilfe. Meine Lösung ist vielen hier sehr ähnlich, aber ich kann nicht anders, als zu denken, dass sie einfacher zu implementieren ist.

Zuerst setze ich ein verstecktes Eingabefeld in Übereinstimmung mit meinem Kontrollkästchen, dh

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

Wenn nun alle checkboxesnicht ausgewählt sind, sind alle vom ausgeblendeten Feld zurückgegebenen Werte deaktiviert.

Beispielsweise bilden hier mit fünf dynamisch eingefügten Kontrollkästchen POSTSdie folgenden Werte:

  '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)

Dies zeigt, dass nur das 3. und 4. Kontrollkästchen onoder sind checked.

Im Wesentlichen zeigt das Dummy- oder ausgeblendete Eingabefeld nur an, dass alles ausgeschaltet ist, es sei denn, es gibt ein "Ein" unter dem Aus-Index, wodurch Sie den Index erhalten, den Sie ohne eine einzige Zeile clientseitigen Codes benötigen.

.

Alexander
quelle
0

Genau wie bei der ASP.NET-Variante, außer dass die versteckte Eingabe mit demselben Namen vor dem eigentlichen Kontrollkästchen (mit demselben Namen) steht. Es werden nur die letzten Werte gesendet. Wenn ein Kontrollkästchen aktiviert ist, werden Name und Wert "Ein" gesendet. Wenn das Kontrollkästchen deaktiviert ist, werden der Name der entsprechenden versteckten Eingabe und der Wert, den Sie ihm geben möchten, gesendet. Am Ende erhalten Sie das Array $ _POST zum Lesen mit allen aktivierten und nicht aktivierten Elementen, "on" - und "false" -Werten, keine doppelten Schlüssel. Einfach in PHP zu verarbeiten.

user3124825
quelle
0

Da ich das gleiche Problem mit nicht aktivierten Kontrollkästchen hatte, die beim Senden von Formularen nicht gesendet werden, habe ich eine andere Lösung gefunden, als die Kontrollkästchenelemente zu spiegeln.

Alle deaktivierten Kontrollkästchen mit

var checkboxQueryString;

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

Ich habe das Problem mit diesem Code behoben:

HTML-Formular

<input type="checkbox" id="is-business" name="is-business" value="off" onclick="changeValueCheckbox(this)" >
<label for="is-business">Soy empresa</label>

und die Javascript-Funktion durch Ändern des Kontrollkästchenwertformulars:

//change value of checkbox element
function changeValueCheckbox(element){
   if(element.checked){
    element.value='on';
  }else{
    element.value='off';
  }
}

und der Server prüfte, ob der Datenbeitrag "ein" oder "aus" ist. Ich habe Playframework Java verwendet

        final Map<String, String[]> data = request().body().asFormUrlEncoded();

        if (data.get("is-business")[0].equals('on')) {
            login.setType(new MasterValue(Login.BUSINESS_TYPE));
        } else {
            login.setType(new MasterValue(Login.USER_TYPE));
        }
Yonatan Alexis Quintero Rodrig
quelle