다단계 웹 양식을 작성하려면 어떻게해야합니까?

Question

여러 단계로 구성된 webform을 구축하려고합니다. 스택 오버플로/스택 교환 웹 양식을 플래그로 지정하여 패턴 화하고 있습니다. 문제는 "다음 단계"동작을 트리거하는 방법을 모르겠습니다.

설명하기 위해 스택 오버플로에서 질문을 표시하려면 flag을 클릭하고 팝업창이 나타나면 선택하라는 메시지가 나타납니다. 두 번째 옵션 ("여기에 속하지 않거나 중복 됨")을 선택하면 양식에서 자동으로 두 번째 화면으로 이동합니다.

첫 번째 화면 :

문제는 내가 기본 트리거가 무엇인지 모르겠입니다 :

클릭하면, 그것은에 자동으로 리디렉션합니다. 라디오 버튼을 클릭하면 최종 사용자가 다음 화면으로 어떻게 보내 집니까?

나는 소스를 확인했지만, 나는 절반 사진을보고 있어요 느낌이 :

나는 이와 유사한 어떤 연습 예를 찾을 수 HTML 자습서 아무리. 이 자바 스크립트 용의자,하지만 이러한 작업을 트리거하는 연결된 .js 파일을 찾을 수 없습니다.

So : 클릭하면 웹 폼이 어떻게 자동 리디렉션됩니까? 후속 조치로 JavaScript를 사용하는 경우 사용할 수있는 HTML/CSS 만 사용하는 해결 방법이 있습니까?

Answer 1

이 문제는 프레임 워크보다 낮은 수준에서 생각하는 것이 도움이 될 수 있습니다. 다중 단계 형식을 만들 수있는 두 가지 방법이 있습니다.

첫 번째 (일반적으로 오래된) 방법은 서버에 상태를 저장하는 것입니다. 양식의 각 단계는 실제로 별도의 양식이며 설문을 통한 클라이언트의 진행은 서버에 유지됩니다 (예 : 세션 데이터의 일부로).

두 번째 방법 (더 현대적인 방법)은 예상대로 자바 스크립트를 사용하는 것입니다. 이 경우 검은 마법이 거의 발생하지 않으며 클릭에 대한 자동 리디렉션이 없습니다. 당신이하는 일은 사용자의 선택에 따라 몇 가지 요소를 보여 주거나 감추는 아주 긴 형식을 가지고 있습니다 (당연히 표시하거나 숨길 수있는 복수의 <form> 요소를 가질 수 있습니다).

Answer 2

글쎄, 나는 일종의 jQuery 마법사 플러그인을 사용하고 나의 필요에 맞춰 줄 것이다. 나는 그것을 아주 최근에했고 그것은 그렇게 어려운 것이 아니었다. SmartWizard 3.0을 사용해보십시오, 꽤 활발한데, 마지막 릴리즈는 약 2 개월 전이었고 코더들은 제 질문에 꽤 빨리 대답했습니다.

는 여기있다 : https://github.com/mstratman/jQuery-Smart-Wizard

당신은 라디오 버튼을 클릭의 작용에 이벤트를 연결하는 다음 단계로 진행하기 위해 마법사를 실행할 수 있습니다.

행운을 빕니다 :)