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

Question

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

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

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

748 6

jQuery javascript html forms

6 ответов:

Comments

Ничего не найдено.

CMS · Accepted Answer · 2009-08-12 04:53:20

просто обрабатывать форму представления на отправить событие, и возвращает false:
$('#contactForm').submit(function () {
 sendContactForm();
 return false;
});
вам больше не нужно событие onclick на кнопке отправки:
<input class="submit" type="submit" value="Send" />

karim79 · Accepted Answer · 2016-06-10 21:15:10

здесь:
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 в качестве обратного вызова. Мы передаем событие на обратный вызов call preventDefault, который является то, что предотвратит щелчок от отправки формы.

Jesse Kochis · Accepted Answer · 2016-02-15 13:44:09

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

11

2016-02-15 13:44:09

Brian Loughnane · Accepted Answer · 2015-06-23 06:46:54

в открывающем теге формы установите атрибут действия следующим образом:
<form id="contactForm" action="#">

Shishir Arora · Accepted Answer · 2014-09-03 20:37:50

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

CPHPython · Accepted Answer · 2018-05-30 19:18:45

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