выполнение javascript после завершения отправки формы

Я пытаюсь отправить некоторые файлы в свою базу данных с помощью формы. Форма имеет цель скрытого iframe. Когда он закончит загрузку, я хотел показать сообщение.

 $("form#formPost").submit();
 customFunction();

этот пример, похоже, не заканчивает отправку перед запуском customFunction(), что очень плохо для того, что я проектировал.

есть ли способ сделать что-то, что будет срабатывать, когда он завершит отправку данных? Я смотрел вокруг на stackoverflow, и там arent много постов непосредственно об этом. Я чувствую, что мне придется идти в целевой iframe и выполнить код, когда он будет готов, и т. д. Есть ли способ сделать так, как я хочу?

варианты я пробовал:

 $("form#formPost").submit(function(){ customFunction(); });
6
form-submit forms javascript jquery post

3 ответов

коллега создал функцию, которая делает именно это.

function SubmitWithCallback(form, frame, successFunction) {
   var callback = function () {
       if(successFunction)
           successFunction();
       frame.unbind('load', callback);
   };

   frame.bind('load', callback);
   form.submit();
}

эта функция принимает форму, которую вы отправляете, целевую iframe форм и функцию anon, которая будет выполнена при успешном выполнении.

8

Если вы отправляете форму традиционным способом, вы по существу говорите: "Я закончил с этой страницей. Вот куча данных формы для вас, веб-сервер, чтобы отобразить мою следующую страницу". Веб-сервер принимает данные формы и возвращает браузеру следующую страницу.

Если вы не хотите перезагрузки страницы, вы можете отправить свою форму с помощью Ajax. Это довольно просто с jQuery:

http://api.jquery.com/jQuery.ajax/

Использование Ajax, у вас есть четко определенные события, когда отправка завершается, когда она успешна и когда она ошибается.

Я бы не рекомендовал подход таргетинга на скрытый iframe. Ajax лучше подходит для этого типа обработки.

обновление

вот пример того, как вы можете структурировать Ajax

<form id='myFormId'>
<!-- Form fields, hidden, file or otherwise -->
</form>

var formVars = $("#myFormId").serialize();
$.ajax({ url: ajaxUrl, cache: false, type: 'POST', data: formVars, 
    success: function (data) { handleSuccessCase }, 
    error: handleAjaxError });

обновление 2

на основе комментариев в https://stackoverflow.com/a/5513570/141172

можно попробовать:

var formVars = $('#myFormId').serialize() + '&foo=' + $('#id_of_your_file_input').val()

кроме того, вы можете попробовать плагин, который вы предлагаете в своих комментариях, который является тем же решением, что и в связанном ответе выше.

3

возможно, самое простое, что нужно сделать, это прикрепить onload событие на iframe. Когда форма завершит отправку, событие запустится.

1