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