Formularfelder innerhalb der Anzeige senden: kein Element

84

Ich habe eine lange Form, die ich in 6 Schritte aufgeteilt habe. Wenn das Formular geladen wird, werden alle Schritte geladen, aber nur der erste Schritt ist sichtbar. Der Rest hat CSS von, display:noneso dass sie versteckt sind. Wenn ein Schritt mit Javascript abgeschlossen und validiert ist, wird der aktuelle Schritt auf display:noneund der neue Schritt auf gesetzt display:block. Im letzten Schritt sendet der Benutzer das Formular. Wie erwartet werden jedoch nur die Felder im display:blockElement auf der Seite gesendet. Alle ausgefüllten Felder in den Elementen mit display:nonewerden ignoriert.

Gibt es eine Möglichkeit, die Felder innerhalb der display:noneElemente zu senden ?

Wenn nicht, gibt es einen anderen Weg, um den gleichen Effekt zu erzielen?

javascript css forms Nick Petrie
quelle
12
In welchem ​​Browser haben Sie dieses Verhalten gesehen? Browser scheinen display: nonein all meinen Tests Formularelemente innerhalb von Containern einzureichen .
Tremby

Antworten:

177

Stellen Sie sie stattdessen auf visibility:hiddenund position:absoluteein. Die Felder werden nicht mit an den Server gesendet display:none, sondern mit visibility:hidden. Wenn Sie auch "Position" auf "Absolut" umschalten, sollten Sie den gleichen visuellen Effekt erzielen.

Update Dies scheint in keinem aktuellen Browser mehr ein Problem zu sein (Stand November 2015). Felder werden auch dann gesendet, wenn die Anzeige auf "Keine" gesetzt ist. Felder, die deaktiviert sind, werden jedoch weiterhin nicht gesendet.

adam0101
quelle
26
Dies scheint in keinem aktuellen Browser ein Problem zu sein. Felder werden auch dann gesendet, wenn die Anzeige auf "Keine" gesetzt ist. Felder, die deaktiviert sind, werden jedoch weiterhin nicht gesendet.
Adam0101
3
IE8 (Überraschung!) Hat immer noch Probleme mit Buchungsfeldern, die auf eingestellt sind display:none;. Das gleiche Problem tritt auf, wenn auf dem Feld ein anderes HTML-Element platziert ist.
Erik Töyrä Silfverswärd
2
@Pacerier, ja disabledverhindert , dass Werte gesendet werden, aber in einigen älteren Browsern display:nonehätte dies auch diesen Effekt. Beachten Sie, dass diese Antwort vor 4 Jahren veröffentlicht wurde und nur für Entwickler gilt, die für diese älteren Browser entwickeln müssen.
Adam0101
2
Es ist der 20. Januar und es werden die neuesten Versionen von Chrom und Firefox verwendet, es können jedoch noch keine Felder veröffentlicht werden, die zuvor beim Laden ausgeblendet wurden
Masinde Muliro,
3
Chrome 49 kann hier bestätigen, dass das Senden von Eingabeelementen innerhalb der Anzeige: Keine funktioniert NICHT.
CSvan
4

In HTML4, Abschnitt 17.13.2, heißt es ausdrücklich, dass selbst versteckte Steuerelemente, die die Anzeige verwenden, möglicherweise nicht zur Übermittlung gültig sind.

https://www.w3.org/TR/html401/interact/forms.html

Wenn der Browser die Anzeige ignoriert: keine, ist er nicht vollständig HTML-fähig. Ich empfehle, für einen echten Browser zu wechseln.

elixon
quelle
1
Ein Programmierer kann den Besuchern nicht sagen, welchen Browser er ebenfalls verwendet, und ich habe das gleiche Problem mit dem neuesten Firefox. Versuchte Anzeige: keine oder Sichtbarkeit: versteckt, aber keine Arbeit.
DonP
Wer sonst platziert auf so vielen Websites Banner "Es ist Zeit, Ihren Browser zu aktualisieren"? ;-) Ich verstehe es. Sie meinten nicht, dass "Programmierer den Besuchern nicht sagen können, welchen Browser sie verwenden sollen" - das würde die Meinungsfreiheit verletzen ... Sie meinten wahrscheinlich "angeheuerter Programmierer". OK. Mein Beitrag war nicht sehr hilfreich, weil ich nur darauf hinweisen wollte, was das richtige Verhalten ist, das von Standards vorgegeben wird. Das ist es.
Elixon
1
Auf jeden Fall war mein Kommentar zur Sichtbarkeit: versteckt (und vielleicht sogar angezeigt: keine) Unsinn, als mir klar wurde, dass es sich in meinem Fall um einen Fehler oder eher ein Versehen handelt, das in den HTML-Standard geschrieben wurde. Wenn ein Kontrollkästchen deaktiviert und das Formular gesendet wird, ist es so, als wäre es nicht einmal vorhanden. Es reicht nicht nur nichts ein (verzeihen Sie das Doppel-Negativ), sondern es legt überhaupt nichts vor.
DonP
Es sieht also so aus, als wäre es damals kein eigenartiger, nicht HTML-kompatibler Browser. Fall abgeschlossen.
Elixon