it-swarm.com.ru

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

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

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

86
Ian Storm Taylor

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

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

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

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

Вот:

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 в качестве обратного вызова. Мы передаем событие в функцию обратного вызова для вызова protectDefault , что будет препятствовать отправке формы щелчком мыши.

18
karim79

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

<form id="contactForm" action="#">
14
Brian Loughnane

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

11
Jesse Kochis

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

3
Shishir Arora

Если вы хотите, чтобы отображались ошибки браузера по умолчанию , например, те, которые вызваны атрибутами 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 остановит распространение (т. Е. Если к отправке формы подключено больше обработчиков, они не будут выполнены), но в этом случае действие, инициируемое браузером, всегда будет выполнить первым. Даже с 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
3
CPHPython