Запобігти перенаправленню форми АБО оновлювати під час надсилання?

Я переглянув купу сторінок, але не можу знайти свою проблему, тому мені довелося зробити допис.

У мене є форма, яка має кнопку подати, і при надсиланні я хочу, щоб вона НЕ оновлювалась АБО не перенаправляла. Я просто хочу, щоб 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 як зворотний виклик. Ми передаємо подію зворотному виклику, щоб викликати prevenDefault , що є тим, що заважатиме натисканню надіслати форму.

У початковому тегу форми встановіть атрибут дії приблизно так:

<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" для подання, а також на мобільних телефонах ви не отримуєте кнопку переходу (стиль у деяких мобільних телефонах). Тож дотримуйтесь використання тегу форми та використовуйте прийняту відповідь.