Jquery показать и скрыть вызывающую форму отправки

Question

Хорошо, у меня есть форма, и у нее есть несколько групп полей, например, для редактирования настроек учетной записи Facebook, которые будут отображаться при нажатии на нее.

  <form id="test" action="#" method="POST">
    <ul class="items">
        <li>
            <button class="show-content-button">Show</button>
            <div class="form-content ui-helper-hidden">
                Hello
            </div>
        </li>
        <li>
            <button class="show-content-button">Show</button>
            <div class="form-content ui-helper-hidden">
                Hello
            </div>
        </li>
        <li>
            <button class="show-content-button">Show</button>
            <div class="form-content ui-helper-hidden">
                Hello
            </div>
        </li>
    </ul>
</form>
<script type="text/javascript">
    $(function() {
        $("form#test").submit(function() {
            alert("hello i have been submitted");
        })
        $(".show-content-button").click(function() {
            var $button = $(this);
            if ($button.text() === "Show") {
                $(".form-content", $button.parent()).fadeIn(400);
                $button.html("Hide");
            } else if ($button.text() === "Hide") {
                $(".form-content", $button.parent()).fadeOut(200);
                $button.html("Show");
            }
        })
    })
</script>

Когда я нажимаю на одно из шоу, оновызывает отправку формы ... почему?Я могу исправить эту проблему, вернув false на событие нажатия кнопки, НО, я чувствую, что это взлом, а не решение.Кто-нибудь поможет?

Answer 1

Я считаю, что проблема в том, что по умолчанию (в браузерах, отличных от IE) type кнопки - submit - для вашего случая использования вы хотите, чтобы она была button.Добавление атрибута type="button" должно исправить это.

Вот рабочий пример , демонстрирующий эффект [отсутствия] атрибута type для <button> с.Вы должны будете видеть сетевую активность в инструменте разработки вашего браузера (Firebug в FF, Инструменты разработчика в Chrome)

Answer 2

event.preventDefault() должно быть то, что вы ищете: http://api.jquery.com/event.preventDefault/

<script type="text/javascript">
$(function() {
    $("form#test").submit(function() {
        alert("hello i have been submitted");
    })
    $(".show-content-button").click(function(event) {
        event.preventDefault();
        var $button = $(this);
        if ($button.text() === "Show") {
            $(".form-content", $button.parent()).fadeIn(400);
            $button.html("Hide");
        } else if ($button.text() === "Hide") {
            $(".form-content", $button.parent()).fadeOut(200);
            $button.html("Show");
        }
    })
})
</script>

Answer 3

Я добавил ваш код в jsFiddle (связанный, если вы хотите что-то еще добавить), однако даже если я удаляю событие нажатия для кнопки, отправка все равно срабатывает.Похоже, в отсутствие правильной кнопки отправки HTML выбирает одну из кнопок.(Я не могу найти это поведение, специфичное для кнопок в spec ).

Как и другие «ответчики» теперь предложили, так как я медленный типер, вы должны использовать protectDefault.

Вы можете найти это полезным - Как определяется кнопка отправки по умолчанию в форме HTML?

Answer 4

вам просто нужно добавить return false; остановка отправки формы

<script type="text/javascript">
    $(function() {
        $("form#test").submit(function() {
            alert("hello i have been submitted");
        })
        $(".show-content-button").click(function() {
            var $button = $(this);
            if ($button.text() === "Show") {
                $(".form-content", $button.parent()).fadeIn(400);
                $button.html("Hide");
            } else if ($button.text() === "Hide") {
                $(".form-content", $button.parent()).fadeOut(200);
                $button.html("Show");
            }
    return false;
        })
    })
</script>