Запретить перенаправление формы ИЛИ обновление при отправке?

96

Я просмотрел кучу страниц, но не нашел своей проблемы, поэтому мне пришлось написать сообщение.

У меня есть форма с кнопкой отправки, и при отправке я хочу, чтобы она НЕ обновлялась ИЛИ перенаправлялась. Я просто хочу, чтобы jQuery выполнял функцию.

Вот форма:

<form id="contactForm">
    <fieldset>
        <label for="Name">Name</label>
        <input id="contactName" type="text" />
    </fieldset>

    <fieldset>
        <label for="Email">Email</label>
        <input id="contactEmail" type="text" />
    </fieldset>

    <fieldset class="noHeight">
        <textarea id="contactMessage" cols="20"></textarea>
        <input id="contactSend" class="submit" type="submit" onclick="sendContactForm()" />
    </fieldset>
</form>        
<small id="messageSent">Your message has been sent.</small>

А вот и jQuery:

function sendContactForm(){
    $("#messageSent").slideDown("slow");
    setTimeout('$("#messageSent").slideUp();$("#contactForm").slideUp("slow")', 2000);
}

Я пробовал использовать в форме элемент действия и без него, но не знаю, что делаю не так. Что меня больше всего раздражало, так это то, что у меня есть пример, который делает это идеально: Пример страницы

Если вы хотите увидеть мою проблему вживую, перейдите на stormink.net (мой сайт) и посмотрите на боковую панель, где написано «Пришлите мне и по электронной почте» и «Подписка на RSS». Обе формы, над которыми я пытаюсь заставить это работать.

Ян Сторм Тейлор
источник

Ответы:

178

Просто обработайте отправку формы в событии отправки и верните false:

$('#contactForm').submit(function () {
 sendContactForm();
 return false;
});

Вам больше не нужно событие onclick на кнопке отправки:

<input class="submit" type="submit" value="Send" />
Кристиан К. Сальвадо
источник
11
Работал как шарм! И как бы быстро! Обожаю этот сайт! Огромное спасибо.
Ян Сторм Тейлор,
3
Я помню момент, когда я узнал, что можно вернуть false из отправки, чтобы не отправлять, был также моментом, когда мне действительно начала нравиться система Javascript / DOM.
Imagist
Удивительный. Где я могу найти документацию по спецификациям, объясняющую, что falseпрепятствует отправке?
Дэвид
7
вам действительно стоит использовать e.preventDefault () вместо того, чтобы просто возвращать false ..
Хуан,
3
@RogerFilmyer ошибается. если вы используете "return false;" вы также останавливаете распространение, что вызовет проблемы с UX. Например, если вы ожидаете всплытия «щелчка» или чего-то подобного.
Хуан
19

Вот:

function submitClick(e)
{
     e.preventDefault();
     $("#messageSent").slideDown("slow");
     setTimeout('$("#messageSent").slideUp();
     $("#contactForm").slideUp("slow")', 2000);
}

$(document).ready(function() {
    $('#contactSend').click(submitClick);
});

Вместо использования события onClick вы будете использовать привязку обработчика события click с помощью jQuery к кнопке отправки (или любой другой кнопке), которая будет принимать submitClick как обратный вызов. Мы передаем событие обратному вызову, чтобы вызвать preventDefault , что предотвратит отправку формы щелчком.

karim79
источник
$ ('# contactSend'). click (submitClick (e)); Мне говорят, что «е» не определено ..: /
Давид Да Силва Contín
3
Должно быть $('#contactSend').click(function(e) { submitClick(e) });или$('#contactSend').click(submitClick);
Аарон
14

В открывающем теге вашей формы установите атрибут действия следующим образом:

<form id="contactForm" action="#">
Брайан Локнейн
источник
2
+1 за простое решение. Но, к сожалению, страница все равно будет обновляться при первом входе пользователя. Плохая работа - позвонить myForm.submit();как можно скорее, но тогда вы загружаете страницу дважды.
cyclingLinguist
он не обновится с первого раза.
Nearoo
Этот ответ должен быть отклонен, потому что он НЕ решает исходный вопрос и ухудшает ситуацию, фактически изменяя URL-адрес после перезагрузки страницы. Вам нужно либо e.preventDefault()или in return falseв функции onsubmit. stackoverflow.com/questions/19454310/…
Джефф
10

Похоже, вам не хватает файла return false.

Джесси Кочис
источник
6

Если вы хотите, чтобы отображались ошибки браузера по умолчанию , например, те, которые вызываются атрибутами HTML (отображаются перед обработкой JS клиентского кода):

<input name="o" required="required" aria-required="true" type="text">

Вы должны использовать submitсобытие вместо clickсобытия. В этом случае автоматически отобразится всплывающее окно с запросом « Заполните это поле ». Даже с preventDefault:

$('form').on('submit', function(event) {
   event.preventDefault();
   my_form_treatment(this, event);
}); // -> this will show up a "Please fill out this field" pop-up before my_form_treatment

Как упоминалось ранее , return falseраспространение прекратится (т. Е. Если к отправке формы подключено больше обработчиков, они не будут выполнены), но в этом случае действие, запускаемое браузером, всегда будет выполняться первым. Даже с a return falseв конце.

Поэтому, если вы хотите избавиться от этих всплывающих окон по умолчанию , используйте clickсобытие на кнопке отправки:

$('form input[type=submit]').on('click', function(event) {
   event.preventDefault();
   my_form_treatment(this, event);
}); // -> this will NOT show any popups related to HTML attributes
CPHPython
источник
3

Альтернативным решением было бы не использовать тег формы и обрабатывать событие щелчка на кнопке отправки через jquery. Таким образом, страница не будет обновляться, но в то же время есть обратная сторона: кнопка «Enter» для отправки не будет работать, а также на мобильных телефонах вы не получите кнопку перехода (стиль на некоторых мобильных устройствах). Так что придерживайтесь использования тега формы и используйте принятый ответ.

Шишир Арора
источник