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

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

У меня есть форма с кнопкой отправки, и при отправке я хочу, чтобы она НЕ обновлялась ИЛИ перенаправлялась. Я просто хочу, чтобы 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». Обе формы, над которыми я пытаюсь заставить это работать.

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

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

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

<input class="submit" type="submit" value="Send" />

Вот:

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 , что предотвратит отправку формы щелчком.

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

<form id="contactForm" action="#">

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

Если вы хотите, чтобы отображались ошибки браузера по умолчанию , например, те, которые вызываются атрибутами 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

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