display : none 요소 내 양식 필드 제출


84

6 단계로 나눈 긴 형태가 있습니다. 양식이로드되면 모든 단계가로드되지만 첫 번째 단계 만 표시됩니다. 나머지는 CSS가 display:none있으므로 숨겨져 있습니다. 단계가 완료되고 Javascript로 유효성이 검증되면 현재 단계가로 설정되고 display:none새 단계가로 설정됩니다 display:block. 마지막 단계에서 사용자는 양식을 제출합니다. 그러나 예상대로 display:block페이지 요소 의 필드 만 제출됩니다. 요소에서 완료된 모든 필드 display:none는 무시됩니다.

display:none요소 내부에 필드를 제출하는 방법이 있습니까?

그렇지 않은 경우 동일한 효과를 얻을 수있는 다른 방법이 있습니까?


12
어떤 브라우저에서이 동작을 보셨습니까? 브라우저 display: none는 모든 테스트 에서 컨테이너 내의 양식 요소를 제출하는 것 같습니다 .
tremby

답변:


177

로 설정 visibility:hidden하고 position:absolute대신. 필드는과 함께 서버로 전송되지 display:none않지만 과 함께 전송됩니다 visibility:hidden. 또한 "위치"를 "절대"로 전환하면 동일한 시각적 효과를 얻을 수 있습니다.

업데이트이 문제는 현재 브라우저에서 더 이상 문제가되지 않는 것 같습니다 (2015 년 11 월 기준). 디스플레이가 '없음'으로 설정된 경우에도 필드가 제출됩니다. 그러나 '비활성화'된 필드는 계속 제출되지 않습니다.


26
이것은 현재 브라우저에서 문제가되지 않는 것 같습니다. 디스플레이가 '없음'으로 설정된 경우에도 필드가 제출됩니다. 그러나 '비활성화'된 필드는 계속 제출되지 않습니다.
adam0101

3
IE8 (놀라운!)은 display:none;. 필드 위에 다른 HTML 요소가있는 경우에도 동일한 문제가 발생합니다.
Erik Töyrä Silfverswärd

2
@Pacerier, yes disabled는 값이 제출되는 것을 방지하지만 일부 구형 브라우저 에서도이 display:none효과가 있습니다. 이 답변은 4 년 전에 게시되었으며 이전 브라우저를 위해 개발해야하는 개발자에게만 적용됩니다.
adam0101

2
1 월 20 일이고 최신 버전의 크롬과 파이어 폭스를 사용하고 있지만로드시 이전에 숨겨진 필드는 여전히 게시 할 수 없습니다.
Masinde

3
여기에서 Chrome 49는 display : none 내에서 입력 요소 제출이 작동하지 않음을 확인할 수 있습니다.
csvan

4

HTML4, 섹션 17.13.2는 display : none을 사용하는 숨겨진 컨트롤도 제출에 유효 할 수 있다고 명시합니다.

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

따라서 브라우저가 display : none을 무시하면 완전히 HTML을 지원하지 않습니다. 실제 브라우저로 전환하는 것이 좋습니다.


1
프로그래머는 방문자에게 어떤 브라우저를 사용하는지 알 수 없으며 최신 Firefox에서도 동일한 문제가 발생합니다. display : none 또는 visibility : hidden을 시도했지만 둘 다 작동하지 않습니다.
DonP

다른 누가 이렇게 많은 사이트에 "브라우저를 업그레이드 할 시간"이라는 배너를 배치하고 있습니까? ;-) 알겠습니다. 당신은 "프로그래머가 방문자에게 어떤 브라우저를 사용해야하는지 말할 수 없다"는 의미가 아니었다. 이는 표현의 자유를 침해 할 것이다. "고용 된 프로그래머"를 의미했을 것이다. 확인. 표준에 따라 올바른 행동이 무엇인지 지적하고 싶었 기 때문에 내 게시물은별로 도움이되지 않았습니다. 그게 다야.
elixon

1
어쨌든 visible : hidden (그리고 어쩌면 display : none)에 대한 내 의견은 내 경우 HTML 표준에 작성된 버그 또는 오히려 감독이라는 것을 깨달았 기 때문에 말도 안되었습니다. 체크 박스가 선택 해제되고 양식이 제출되면 마치 거기에없는 것처럼 보입니다. 아무것도 제출하지 않을뿐만 아니라 (이중 부정을 용서) 전혀 제출하지 않습니다.
DonP

따라서 HTML을 준수하지 않는 기발한 브라우저가 아닌 것 같습니다. 경우 폐쇄.
elixon
당사 사이트를 사용함과 동시에 당사의 쿠키 정책개인정보 보호정책을 읽고 이해하였음을 인정하는 것으로 간주합니다.
Licensed under cc by-sa 3.0 with attribution required.