Почему form.submit(); вызывает ajax, а не обычный post?

Question

[Максим Тимофеев]

Видимо я чего-то не знаю о js ибо есть код

$('.ya_donate').on('submit',function(e){
  e.preventDefault();
  var form = $(this);
  var data = form.serialize();
  $.post('/site/donate',data,function(data){
    form.submit(); //вот тут ожидаю обычный post, а получаю такой же ajax
  })
});

В форме есть action и он отличный от того куда летит ajax. Я ожидаю, что при отправке формы, отправка отменяется, идет ajax, там в ответ приходит json не имеет значения какой, но после ответа должен идти обычный post. Но идет еще 1 ajax, при чем туда же, а не туда куда указано в action формы.
Немного в замешательстве. Есть идеи?

Answer 1

[Артём Лучников]

Попробуйте так

$('.ya_donate').on('submit', function(e) {
    e.preventDefault();
    var form = $(this);
    var data = form.serialize();
    $.post('/site/donate', data, function(data) {
        form.unbind('submit').submit();
    })
});

Суть в том, что мы переключаемся на другое событие, на которое не подействует e.preventDefault(), объявленный выше по коду.

Comments

[Максим Тимофеев]

Спасибо, то что надо

Answer 2

[Дима Паутов]

e.preventDefault(); - это отменяет стандартную отправку формы. Она не будет отправляться на сервер никак!!!

$.post('/site/donate',data,function(data){ - это ajax отправка. Поэтому, когда вы вызываете на форме событие, происходит всё то, что описано в форме!! Чего не понятно то? У вас бесконечный цикл. Форма каждый раз сама себя отправляется. Т.к. внутри события .on('submit') вы ещё раз отправляете форму и так до бесконечности!

Comments

[Максим Тимофеев]

Так что, эмулировать еще 1 клик на кнопку отправки?

[Дима Паутов]

Максим Тимофеев: убери строчку form.submit();

[Максим Тимофеев]

Дима Турков: Уберу и что?. Ajax будет идти, повторного уже не будет, а как отправку обычную по его завершению запустить?

[Максим Тимофеев]

Дима Турков: По сути нужен обычный режим работы html формы, но перед ее отправкой надо сохранять ряд данных из нее. Поэтому решил так кинуть ajax. А сама форма улетает на другой сервер, так что там решить сохранение не представляется возможным.

[Максим Тимофеев]

Дима Турков: еще раз объясняю. Надо 2 запроса. 1 - обычный post на сторонний сайт, а перед этим ajax на свой. То есть отправили ajax, получили json, обрвботали, отправили обычный пост на сторонний сервер.

[Kovalsky]

Максим Тимофеев: Не отменяйте дефолтное действие, шлите запрос и возвращайте true, нельзя так?

"отправили ajax, получили json, обрвботали, отправили обычный пост" - обработка обязательная?

[Максим Тимофеев]

Никита Полевой: Это форма доната от яндекса. Яша мне по http шлет уведомления только об оплатах, а я хочу иметь статистику по тем, кто отправил форму, но по каким-то причинам не завершил оплату. Поэтому пытаюсь перед отправкой пользователся с post запросом к яше, отправить ajax и забить форму себе в базу, заодно получаю id заказа и подставляю в форму.

[Максим Тимофеев]

Никита Полевой: Заодно получаю id заказа и подставляю в форму.
Поэтому такой адский велосипед. Ожидал что form.submit(); грубо говоря отменит e.preventDefault();. Но фокус не удался.

[V Sh.]

Максим Тимофеев: уберите e.preventDefault() и form.submit. У вас получится стек вызовов: ajax, затем дефолтный submit.

[Максим Тимофеев]

V Sh.: тогда не будет дожидаться результата ajax

[Максим Тимофеев]

Дима Турков: В любом случае спасибо

Answer 3

[Kovalsky]

Как-то так:

$('form').submit( function(event) {
    var form = this;
    event.preventDefault();
    setTimeout( function () { 
        form.submit();
    }, 300);
});

То есть банально вызывать метод submit у HTMLFormElement, а не у $-объекта.

Comments

[Максим Тимофеев]

я сократил код, там есть модификация формы после ajax, так что надо дожидаться json из ajax, таймаутом тут не обойтись.

[Kovalsky]

Максим Тимофеев: не, соль не в таймауте: сохраняйте референс на HTMLFormElement и вызывайте для него submit когда нужно.

[Максим Тимофеев]

Никита Полевой: нет, form.submit(); вызывает повторно ajax, на url прописанный в ajax, а не в action

[Kovalsky]

Максим Тимофеев: встречное нет: так будет если в form у вас ссылка на jQuery-объект, а для HTMLFormElement submit это прямой вызов, без триггера соответствующего ивента. Проверьте сами.

[Максим Тимофеев]

Никита Полевой: form.unbind('submit').submit(); решает

[Максим Тимофеев]

Никита Полевой: В любом случае спасибо

[Kovalsky]

Максим Тимофеев: с таким подходом можно было бы и $.fn.one использовать. Нативный submit без триггера делает именно то что вы описали и ничего более, в отличие от $.fn.unbind.

Answer 4

[Олег]

$( document ).ready(function() {

	var first = true;

	$( '.ya_donate' ).on( 'submit', function() {

		var form = $(this);

		if ( first ) {

			first = false;

			$.post( '/site/donate', form.serialize(), function( data ) {
				form.submit();
			});

			return false;

		}

	});

});

Comments

[Максим Тимофеев]

яд, сам уже думал о таком, но рука не поднялась))) наверное сработает, но Артём Лучников дал отличный вариант с form.unbind('submit').submit();
В любом случае спасибо

[Олег]

Максим Тимофеев: Старое доброе замыкание) Но да можно тупо удалить событие.