나는 내 html로 일련의 양식을 가지고 있습니다. 사용자가 "계속"버튼을 클릭하면 현재 버튼이 사라지고 다음 버튼이 나타납니다. 그러나 나는 "계속"버튼이 눌려진 (즉, 어떤 형식인지) 방법이 있는지 궁금 해서요. 그래서 기본적으로 현재 양식을 검사하고 숨기고 다음 양식을 요구하지 않고 보여주는 코드 조각을 가지고 있습니다. 이드의 것. 그냥 웹 사이트 어쨌든 "파산"정직 (클릭 된 항목이 어떤 양식인지 알아 내십시오
나는 몇 가지를 시도했지만 아무도 내가 여기에 코드를 게시하지 않습니다 일했다.
당신이 jQuery를 사용하는 경우 그것은 꽤 바람의가 :
$(function() {
// Attach click handler to your buttons
$("button, input[type=submit]").click(function(e) {
e.preventDefault();
// Hide the correct form
var thisForm = $(this).parents("form").hide();
// Show the form after this one
thisForm.nextAll("form:first").show();
});
});
그것은 당신을 위해 너무 숨어과 양식을 보여주는를 처리 할 수 있습니다. 귀하의 버튼이 <button> 또는 <input type="submit">이고 귀하의 양식 요소가 동일한 상위 내에 있다고 가정합니다.
물론이 동작이없는 페이지의 다른 부분에 단추가있는 경우 해당 단추에 formContinue과 같은 클래스를 추가하고 위 코드의 세 번째 줄을 다음과 같이 변경해야합니다.
$("button.formContinue, input[type=submit].formContinue").click(function(e) {
"양식 : 처음"다음 페이지로 이동하면 빠른 질문입니다. 형제 자매, 나는 이전 것을 받아 들일 수 있습니까? – Tsundoku
죄송합니다. 저의 형제 자매 ("form : first")가 시리즈의 첫 번째 형식을 갖게 될 것입니다. 이전 또는 다음 양식을 가져 오려면 thisForm.prev() 및 thisForm.next()를 사용하십시오. 양식 사이에 다른 요소가있는 경우 thisForm.prevAll ("form : first") 및 thisForm.nextAll ("form : first")을 사용하십시오. 나는 이것을 보여줄 나의 대답을 업데이트했다. –
간단한은 각 등을 제공합니다 "버튼을 계속"할 수 있습니다 다른 id은 식별하기가 쉽습니다 (예 : id이 이 문자열 '_cnt'과 연결될 수 있음).하지만 jquery를 사용하는 경우 .parent() 메서드를 사용하면 객체의 " 부모 "로 표시되므로이 경우에는 계속 버튼을 해당 양식의 즉각적인 하위 항목으로 설정하는 것이 좋습니다 (일부만 사용하는 경우으로 이동). 인기있는 jquery와 같은 od JS 프레임 워크는 브라우저 비 호환성을 가로 질러 당신을 우회합니다 & C, 그렇게하는 것을 고려하십시오 ... 그들은 입니다. 정말로이 유용합니다!).
모든 입력 요소에 대해 부모 양식을 element.form까지 얻을 수 있습니다. 각 요소 내부에서 다음 형제를 element.nextSibling으로 찾을 수 있습니다. 당신은 그냥 자바 스크립트로 시작 할 수있다
<!DOCTYPE html>
<html lang="en">
<head>
<title>SO question 3436720</title>
<script>
function showNext(form) {
var next = nextSibling(form, 'FORM');
form.style.display = 'none';
if (next) next.style.display = 'block';
}
function nextSibling(element, tagname) {
var next = element.nextSibling;
while (next && next.tagName != tagname) next = next.nextSibling;
return next;
}
</script>
<style>
.hide { display: none; }
</style>
</head>
<body>
<form>Form 1<button onclick="showNext(this.form)">next</button></form>
<form class="hide">Form 2<button onclick="showNext(this.form)">next</button></form>
<form class="hide">Form 3<button onclick="showNext(this.form)">next</button></form>
<form class="hide">Form 4<input type="submit"></form>
</body>
</html>
:
다음은 수학입니다. 그러나 jQuery과 같이 DOM 조작을 현혹시키는 JavaScript 라이브러리를 사용하는 것이 좋습니다. 여기에 그것의 도움으로 같이하는 방법은 다음과 같습니다
<!DOCTYPE html>
<html lang="en">
<head>
<title>SO question 3436720 with jQuery</title>
<script src="http://code.jquery.com/jquery-latest.min.js"></script>
<script>
$(document).ready(function() {
$('button.next').click(function() {
$(this).closest('form').hide().next('form').show();
});
});
</script>
<style>
.hide { display: none; }
</style>
</head>
<body>
<form>Form 1<button class="next">next</button></form>
<form class="hide">Form 2<button class="next">next</button></form>
<form class="hide">Form 3<button class="next">next</button></form>
<form class="hide">Form 4<input type="submit"></form>
</body>
</html>
양식이 어떻게 구성되어 있습니까? 한 페이지에 여러 개의 양식이 있습니까? – quantumSoup
어떤 종류의 자바 스크립트 라이브러리를 사용하고 있습니까? –
@quantumSoup : 한 페이지에 여러 개의 양식이 있습니다. @Ben : 원시 javascript =와 함께이 작업을하고 있지만 프레임 워크를 사용하고 있지는 않습니다. – Tsundoku