2012-09-17 3 views
10

기본 HTML 양식의 경우 양식을 세 개의 탭으로 구분하고 각 탭에는 특정 필드가 포함되며 양식을 제출할 때 세 가지 양식의 모든 데이터를 사용할 수 있기를 바랍니다 제출.html 양식에 숨겨진 필드 제출

그래서 난 <ul><li>

<ul class="subnav"> 
    <li class="subnav0 current"><a href="javascript:showTab('tab1');">Tab1</a></li> 
    <li class="subnav1"><a href="javascript:showTab('tab2');">Tab2</a></li> 
    <li class="lastItem subnav2"><a href="javascript:showTab('tab3');">Tab3</a></li> 
</ul> 

의해이 메뉴 아래에 만들어진 메뉴가, I가 탭의 각각을 나타내는 세 div가있다 :

<div class="tab1"></div> 
<div class="tab2 displayNone"></div> 
<div class="tab3 displayNone"></div> 

입력 요소는 것이다 제어 각 탭 div에 넣을 수 있습니다. 메뉴 탐색 막대의 javascript는 각 div의 show() 메서드를 호출하여 표시 할 탭을 제어합니다. (jQuery 사용하기).

이제 내 문제는 : 나는 모든 형태 (세 된 div 내의 모든 컨트롤)를 제출 할 수 있도록하려는

1). 그러나 html 양식은 displayNone div 내 입력 컨트롤을 제출하지 않으므로 다른 탭이 아니라 현재보고있는 탭 내에서만 데이터를 제출할 수 있습니다.

2) tab2 또는 tab3에서 양식을 초기화 할 때 hide 요소에 대한 일부 javascript 기능을 수행하려고합니다. 그러나, 그들은 display : none이기 때문에 자바 스크립트는 아무런 효과가 없습니다.

그래서 어떻게 든 div를 숨길 수있는 방법이 있습니까? 또한 양식을 제출하고 그것에 자바 스크립트 작업을 수행 할 수 있을까요?

+1

jQuery UI Tabs 플러그인을 사용해보십시오. http://jqueryui.com/demos/tabs/ – diEcho

+1

감사합니다. @diEcho, 그런 jQuery 플러그인이 있다는 것을 알고 있지만, 제가 알고있는 것이 더 행복하다고 생각합니다. 내 시나리오에 맞는 솔루션을 제공합니다. –

답변

13

W3C 디스플레이에 따르면 그들은 successsful 컨트롤

17.13.2 성공적 제어

성공적인 제어가 제출 "유효"입니다 간주됩니다로서 없음 컨트롤이 여전히 서버로 전송 될 수 있습니다 . 성공한 모든 컨트롤의 컨트롤 이름은 제출 된 양식 데이터 세트 의 일부로 현재 값과 쌍을 이룹니다. 성공적인 제어는 FORM 요소 내에 으로 정의되어야하며 제어 이름이 있어야합니다. 그러나

: 성공하지 못할 수 있습니다 사용할 수 없습니다

  • 를 제어합니다.
  • 두 개 이상의 제출 단추가 양식에있는 경우 활성화 된 제출 단추 만 성공합니다.
  • 모든 "켜기"체크 박스는 일 수 있습니다.
  • 같은 값을 공유하는 라디오 버튼의 경우 "켜기"라디오 버튼 만 일 수 있습니다.
  • 메뉴의 경우 컨트롤 이름은 SELECT 요소에서 제공되며 값은 OPTION 요소에서 제공됩니다. 옵션 만 성공할 수 있습니다.
  • 옵션을 선택하지 않으면 컨트롤이 성공하지 못하고 양식이 일 때 이름이나 값이 서버에 제출되지 않습니다.
  • 파일 선택의 현재 값은 하나 이상의 파일 이름 의 목록입니다.서식을 제출하면 각 파일의 내용 이 나머지 양식 데이터와 함께 제출됩니다. 내용은 양식의 내용물 유형에 따라 패키지됩니다.
  • 개체 컨트롤의 현재 값은 개체의 구현에 의해 결정됩니다. 컨트롤이 현재 값 양식이 제출

    이없는 경우

은, 사용자 에이전트는 성공적인 제어로에게 을 치료하는 데 필요하지 않습니다.

는 또한, 사용자 에이전트는 다음과 같은 컨트롤이 성공적으로 고려하지해야합니다

리셋 버튼을. 선언 속성이 설정된 OBJECT 요소 스타일 설정이 이므로 렌더링되지 않은 숨겨진 컨트롤과 컨트롤은 여전히 ​​성공적 일 수 있습니다. 예를 들어

:

<FORM action="..." method="post"> 
<P> 
<INPUT type="password" style="display:none" 
      name="invisible-password" 
      value="mypassword"> 
</FORM> 

여전히 값의 원인이됩니다 이름 "보이지 않는 비밀번호"와 결합하여 양식과 함께 제출합니다. 어떤 경우

는 나던는 각 양식에 jQuery를 serialize() 또는 serializeArray() 시도하고 값을 연결하고 다시 서버로 아약스하지 왜 제대로 동작합니다.

+0

고마워, 나는 장애인과 숨겨진 개념을 혼합했다고 생각한다. 빠른 검색 결과 장애가 발생한 입력란 만 제출되지 않는다고합니다. –

3

첫 번째 점은 입력이 표시되지 않는다고해서 해당 필드를 제출하지 않는다는 의미는 아닙니다.

두 번째 사항에 대해서는 따라 가지 않습니다. 탭 중 하나를 열면 콘텐츠에 대해 몇 가지 작업을 수행하겠다고 말하고 있습니까? 그렇다면, JQuery와 UI는이 작업을 수행 할 수 있습니다 : -

http://jqueryui.com/demos/tabs/#event-show

는보다 완전한 예제를 줄 수, 양식 태그 및 일부 입력을 포함?

+0

답변을 주셔서 감사합니다. 예, 실제로 문제 1 번에 관해서. 요점은 2, 나는 해결 방법을 js 작업을 먼저 할 다음 확인을 작동하고있는 divs 숨 깁니다. –