выяснить, к какой форме принадлежит выбранный элемент - PullRequest
Новая
       8

выяснить, к какой форме принадлежит выбранный элемент

1 голос
/ 09 августа 2010

У меня есть ряд форм в моем html, предполагается, что когда пользователь нажимает кнопку «продолжить», текущая исчезает и появляется следующая. Однако мне было интересно, есть ли способ узнать, какая кнопка «продолжить» была нажата (то есть, какой формы), чтобы просто иметь фрагмент кода, который в основном проверяет и скрывает текущую форму и показывает следующую, не требуя идентификаторы или что-то подобное.

Я попробовал пару вещей, но ни одна из них не сработала, поэтому я не буду публиковать здесь код (честно говоря, он просто «сломал» сайт в любом случае.

Ответы [ 3 ]

1 голос
/ 09 августа 2010

Это довольно легкий, если вы используете 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) {
1 голос
/ 09 августа 2010

Простейшим может быть присвоение каждой такой «кнопки продолжения» различных id, что упрощает идентификацию (например, id может быть id формы, объединенной со строкой '_cnt' илилайк).Но если вы используете jquery, метод .parent() позволяет легко и просто найти «родитель» объекта, поэтому в этом случае я бы рекомендовал просто сделать кнопки продолжения непосредственными дочерними элементами соответствующих форм,(Если вы не используете некоторые хорошие JS-фреймворки, такие как популярный jquery, чтобы показать вам несовместимость браузеров & c, подумайте об этом ... они действительно полезны! -).

0 голосов
/ 09 августа 2010

Для каждого входного элемента вы можете получить родительскую форму по 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>
Добро пожаловать на сайт PullRequest, где вы можете задавать вопросы и получать ответы от других членов сообщества.

Нет похожих вопросов

...