jQuery не препятствует отправке формы

Question

Я хочу запретить отправку формы с помощью jQuery и вместо этого запустить функцию, когда пользователь хочет отправить.

Вот моя разметка форм:

<form action="" method="post" id="msg-form">
    <p><textarea name="msg"></textarea><input type="submit" value="Send"></p>
</form>

И мой код Javascript:

$('#msg-form').submit(function() {
    return false;
}

Однако, когда я нажимаю кнопку отправки, форма все равно отправляется и страница обновляется. Как правильно предотвратить отправку формы?

Answer 1

Кажется, что обработчик событий даже не выполняется, поэтому я предполагаю, что форма не может быть найдена.Попробуйте заключить код в обработчик, выполненный, когда DOM будет готов.В jQuery это можно просто сделать так:

$(function(){
    $('#msg-form').submit(function(event) {
        event.preventDefault();
        // code executed when user tries to submit the form
    });
});

Также, как вы можете видеть выше, вы можете запретить поведение формы по умолчанию при ее отправке.

Answer 2

Событие submit на самом деле не связано с элементом формы. Возможно, вы забыли связать его после загрузки DOM!

Поместите привязку события в $(document).ready(function() { или загрузите скрипт внизу страницы (после загрузки всех элементов).

Answer 3

Это работает

<form action='' onsubmit="return false;">

Как это сделать

<form action='' onsubmit="doSomeWork();return false;">

Answer 4

Попробуйте:

$("#msg-form").submit(function (e) {
    e.preventDefault();
});

Answer 5

Вы не можете дать пользователям кнопку реальной отправки и отправить форму только с помощью JS после проверки:

HTML

<form action="" method="post" id="msg-form">
    <p><textarea name="msg"></textarea><input id="submit" type="button" value="Send"></p>
</form>

JS

$('#submit').on('click', function() {
    // validate
    $('#msg-form')[0].submit();
});

Answer 6

$('#msg-form').submit(function(e){ e.preventDefault(); });