Предотвратить перенаправление формы или обновить при отправке?

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

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

Ответ 1

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

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

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

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

Ответ 2

Здесь:

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

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

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

Ответ 3

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

Ответ 4

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

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

Ответ 5

Альтернативным решением было бы не использовать тег формы и обрабатывать событие click на кнопке submit через jquery. Таким образом, не будет обновления страницы, но в то же время есть недостаток, что кнопка "enter" для отправки не работает, а также на мобильных телефонах, на которые вы не получите кнопку "Ход" (стиль на некоторых мобильных телефонах). Поэтому придерживайтесь использования тега формы и используйте принятый ответ.