Prześlij pola formularza wewnątrz wyświetlacza: brak elementu

84

Mam długą formę, którą podzieliłem na 6 kroków. Po załadowaniu formularza ładowane są wszystkie kroki, ale widoczny jest tylko pierwszy krok. Reszta ma CSS, display:nonewięc są one ukryte. Gdy krok jest zakończony i sprawdzony za pomocą JavaScript, ustawiany jest bieżący krok display:nonei nowy krok display:block. Na ostatnim etapie użytkownik przesyła formularz. Jednak zgodnie z oczekiwaniami display:blockprzesyłane są tylko pola w elemencie na stronie. Wszystkie wypełnione pola w elementach z display:nonesą ignorowane.

Czy istnieje sposób na przesłanie pól wewnątrz display:noneelementów?

Jeśli nie, czy jest inny sposób na osiągnięcie tego samego efektu?

javascript css forms Nick Petrie
źródło
12
W jakiej przeglądarce zauważyłeś to zachowanie? Wydaje się, że przeglądarki wysyłają elementy formularza w display: nonekontenerach we wszystkich moich testach.
tremby

Odpowiedzi:

177

Ustaw je na visibility:hiddeni position:absolutezamiast. Pola nie zostaną wysłane na serwer z display:none, ale będą z visibility:hidden. Przełączając również „pozycję” na „absolutną”, powinieneś uzyskać ten sam efekt wizualny.

Aktualizacja Wydaje się, że nie stanowi to już problemu w żadnej aktualnej przeglądarce (stan na listopad 2015). Pola są przesyłane, nawet jeśli opcja wyświetlania jest ustawiona na „brak”. Jednak pola, które są „wyłączone”, nadal nie będą przesyłane.

adam0101
źródło
26
Wygląda na to, że nie stanowi to problemu w żadnej aktualnej przeglądarce. Pola są przesyłane, nawet jeśli opcja wyświetlania jest ustawiona na „brak”. Jednak pola, które są „wyłączone”, nadal nie będą przesyłane.
adam0101
3
IE8 (niespodzianka!) Nadal ma problemy z wysyłaniem pól, które są ustawione na display:none;. Ten sam problem występuje, jeśli pole ma umieszczony na wierzchu inny element HTML.
Erik Töyrä Silfverswärd
2
@Pacerier, tak, disabledzapobiega przesyłaniu wartości, ale w niektórych starszych przeglądarkach display:nonerównież miałoby ten efekt. Pamiętaj, że ta odpowiedź została opublikowana 4 lata temu i ma zastosowanie tylko do programistów, którzy muszą programować dla tych starszych przeglądarek.
adam0101
2
Jest 20 stycznia i używam najnowszych wersji Chromium i Firefoksa, ale nadal nie można wysyłać pól, które zostały ukryte wcześniej podczas ładowania
Masinde Muliro
3
Chrome 49 tutaj może potwierdzić, że przesyłanie elementów wejściowych w display: none NIE działa.
csvan
4

HTML4, sekcja 17.13.2, mówi wprost, że nawet ukryte kontrolki używające display: none mogą być poprawne do przesłania.

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

Więc jeśli przeglądarka ignoruje display: none, to nie obsługuje w pełni HTML. Polecam przejście na prawdziwą przeglądarkę.

elixon
źródło
1
Programista nie może powiedzieć odwiedzającym, której przeglądarki też używa, i mam ten sam problem z najnowszą przeglądarką Firefox. Próbuję wyświetlić: brak lub widoczność: ukryty, ale nie działa.
DonP
Kto jeszcze umieszcza banery „Czas zaktualizować przeglądarkę” w tak wielu witrynach? ;-) Rozumiem. Nie chodziło Ci o to, że „programista nie może powiedzieć odwiedzającym, jakiej przeglądarki ma używać” - to naruszyłoby wolność wypowiedzi… Prawdopodobnie miałeś na myśli „wynajętego programistę”. OK. Mój post nie był zbyt pomocny, ponieważ chciałem tylko wskazać, jakie jest prawidłowe zachowanie podyktowane standardami. Otóż ​​to.
elixon
1
W każdym razie mój komentarz dotyczący visibility: hidden (a może nawet display: none) był bezsensowny, ponieważ zdałem sobie sprawę, że w moim przypadku jest to błąd, a raczej przeoczenie, zapisany w standardzie HTML. Jeśli pole wyboru nie jest zaznaczone, a formularz przesłany, to tak, jakby go tam nie było. Nie tylko niczego nie zgłasza (wybaczcie, podwójnie negatywne), ale w ogóle nie przedstawia.
DonP
Wygląda więc na to, że nie była to wtedy dziwaczna przeglądarka niezgodna z HTML. Sprawa zamknięta.
elixon