Почему не работает preventDefault на submit?

Question

[Дмитрий]

1) Есть форма. Есть обработчик на jQuery:

$("#cartForm").on('submit', function (event) {   
    event.preventDefault();
    alert('Msg');
});

2) Как перед отправкой формы, после клика на submit, сначала исполнить AJAX запрос, и уже после выполнения(в моем случае это запись в БД) продолжить отправку формы?

Спасибо.

Answer 1

[Igor Makarov]

#cartForm - должен быть id формы. И, желательно, проверить консоль на наличие ошибок.

<form id="cartForm" method="post">
    <input type="text" />
    <input type="submit" />
</form>

// Событие на id формы
$("#cartForm").on('submit', function (e) {   
    e.preventDefault();
    
    // Сохраняем сслыку на форму
    var form = this;
    
    $.ajax({
        url: 'some url'
    }).done(function(data) {
        // Ajax выполнен, отправляем форму
        form.submit();
    });
});

Comments

[Антон Алексеев]

Я быть может чет не понимаю ... но мне кажется тут будет цикл бесконечный не ?

[Аркадий Кожедуб]

Антон Алексеев, вот и мне почему то так кажется, в чем прикол?

[Дмитрий]

Аркадий Кожедуб, Антон Алексеев, Нет. form.submit() файрит стандартный DOM-event submit.

Answer 2

[# a r t u r #]

Замените

$("#cartForm").on('submit', function (e) {

на

$('body').on('submit', '#cartForm', function(e) {

Comments

[Айнур Валиев]

сработало. на стр. было несколько форм

Answer 3

[Сергей Виноградов]

Может быть оба запроса выполнить с помощью AJAX?

Answer 4

[Иван Старков]

1) $("#cartForm").on('submit', function () {
Не работает потому что вы его аргументом функции не передаете надо - .on('submit', function (event) {

2) Сделать submit формы програмно в javascript ($( "#cartForm" ).submit(callback) ) и разместить этот код в колбеке ajax запроса

Comments

[Дмитрий]

1) Аргументом передаю, здесь промахнулся. Все равно не хочет работать как требуется.
2) Спасибо.