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

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

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

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

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

@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

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

Chrome 49 tutaj może potwierdzić, że przesyłanie elementów wejściowych w display: none NIE działa.

— csvan

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

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

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