узнайте, какая форма делает нажатый объект, принадлежит от
У меня есть серия форм в моем HTML, намерение состоит в том, что, когда пользователь нажимает на "продолжать" кнопку, текущая исчезает, и следующий обнаруживается. Однако я задавался вопросом, существует ли способ добраться, которые "продолжаются", кнопка была нажата (то есть, из которых формируются), так, чтобы просто иметь часть кода, который в основном проверяет и скрывает текущую форму и разоблачает следующую, не требуя идентификатора или такого.
Я попробовал несколько вещей, но ни один не работал так, я не буду отправлять здесь код (он честно просто "повредил" веб-сайт так или иначе.
3 ответа
Это совсем несложно, если вы используете 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();
});
});
Это также поможет вам скрыть и отобразить формы. Предполагается, что ваши кнопки либо , либо , и ваши элементы формы находятся внутри одного родителя.
Конечно, если у вас есть кнопки в другом месте на странице, которые не имеют такого поведения, вам нужно добавить класс, например formContinue , к интересующим вас кнопкам и изменить третью строку в приведенный выше код:
$("button.formContinue, input[type=submit].formContinue").click(function(e) {
Простейшим может быть присвоение каждой такой «кнопке продолжения» другого id , что упрощает идентификацию (например, у вас может быть id быть идентификатором формы, соединенным со строкой '_ cnt' или подобным). Но если вы используете jquery, метод .parent () позволяет тривиально легко найти «родительский элемент» объекта, поэтому в этом случае я бы рекомендовал просто сделать кнопки продолжения непосредственными дочерними элементами их соответствующих формы. (Если вы не используете какой-нибудь хороший JS-фреймворк, например популярный jquery, чтобы избавиться от несовместимости браузеров и т. Д., Подумайте о том, чтобы сделать это ... они действительно полезны! - ).
Для каждого элемента ввода вы можете получить родительскую форму с помощью 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>
Возможно, вы только начинаете с JavaScript. Но я бы рекомендовал в конечном итоге использовать библиотеку JavaScript, которая безумно упрощает манипуляции с DOM, например jQuery . Вот как это может выглядеть с его помощью:
<!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>