Wie vermeide ich das Senden von Eingabefeldern, die durch die Anzeige ausgeblendet werden: keine an einen Server?

87

Stellen Sie sich vor, Sie haben ein Formular, in dem Sie die Sichtbarkeit mehrerer Felder wechseln. Und wenn das Feld nicht angezeigt wird, möchten Sie nicht, dass sein Wert angefordert wird.

Wie gehen Sie mit dieser Situation um?

html http field glaz666
quelle

Antworten:

128

Wenn Sie ein Formularelement auf deaktiviert setzen, wird es nicht mehr zum Server geleitet, z.

<input disabled="disabled" type="text" name="test"/>

In Javascript würde es ungefähr so ​​viel bedeuten:

var inputs = document.getElementsByTagName('input');
for(var i = 0;i < inputs.length; i++) {
    if(inputs[i].style.display == 'none') {
        inputs[i].disabled = true;
    }
}
document.forms[0].submit();

In jQuery:

   $('form > input:hidden').attr("disabled",true);
   $('form').submit();
karim79
quelle
16
Mit jQuerys Pseudo-Selektor :inputanstelle von können inputSie auch alle selectund textareaElemente einfach deaktivieren
Daniel Rikowski
8
In jQuery> = 1,6, statt attr("disabled", true)Sie verwenden sollten prop("disabled", true) api.jquery.com/prop
yorch
2
@ dominicbri7 - Ab jQuery 1.6 wird empfohlen , .prop()anstelle von .attr()zu verwenden, um deaktivierte und aktivierte Eigenschaften zu erhalten UND festzulegen . Das Überprüfen und / oder Einstellen mit .attr()wird in einigen Fällen zu unerwünschten Ergebnissen führen. Bitte lesen Sie die jQuery-Dokumentation, bevor Sie kommentieren, worauf sich yorch bezog.
zgr024
@ zgr024 gut, löschte meinen Kommentar
dominicbri7
2
@ DanielRikowski, was ist mit dieser jQuery hier jQuery dort Unsinn. Reden wir über Vanilla JS.
Pacerier
13

Sie können Javascript verwenden, um das deaktivierte Attribut festzulegen. Das Klickereignis "Senden" ist wahrscheinlich der beste Ort, um dies zu tun.

Ich würde jedoch davon abraten, dies überhaupt zu tun. Wenn möglich, sollten Sie Ihre Abfrage auf dem Server filtern. Dies wird zuverlässiger sein.

Benedict Cohen
quelle
7

Wenn Sie alle Elemente oder bestimmte Elemente in einem versteckten übergeordneten Element deaktivieren möchten, können Sie verwenden

$("div").filter(":hidden").children("input[type='text']").attr("disabled", "disabled");

In diesem Beispiel http://jsfiddle.net/gKsTS/ werden alle Textfelder in einem versteckten Div deaktiviert

macio.Jun
quelle
Dies ist eine sehr gute Lösung, da sie durch das versteckte Div iteriert und alle deaktiviert. es sollte mehr +1 bekommen
yeppe
6

Wie wäre es mit:

$('#divID').children(":input").prop("disabled", true); // disable

und

$('#divID').children(":input").prop("disabled", false); // enable

Umschalten aller untergeordneten Eingaben (Auswahlmöglichkeiten, Kontrollkästchen, Eingaben, Textbereiche usw.) in einem ausgeblendeten Div.

Antonio Max
quelle
Dies ist eine großartige Lösung, wenn Sie alle Eingaben erfassen möchten. gute Arbeit
doz87
3

Eine sehr einfache (aber nicht immer bequemste) Lösung besteht darin, das Attribut "Name" zu entfernen. Der Standard verlangt, dass Browser keine unbenannten Werte senden, und alle mir bekannten Browser halten sich an diese Regel.

jsalvata
quelle
4
Nicht empfehlenswert, da Sie die Eingaben kaum zurücksetzen können, wenn Sie den Status über Javascript ändern, ohne alle Namensattribute zwischenzuspeichern. Es ist viel einfacher, den deaktivierten Status zu wechseln.
Simon
1

Ich würde entweder den Wert aus der Eingabe entfernen oder das Eingabeobjekt aus dem DOM entfernen, damit es nicht existiert, um überhaupt gebucht zu werden.

JMP
quelle