表單完成提交后執行javascript

Question

我試圖用表單將一些文件提交到我的數據庫。 表單具有隱藏iframe的目標。 當它完成加載時，我想要顯示一條消息。

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

這個例子似乎沒有在觸發customFunction（）之前完成提交，這對於我正在設計的內容非常糟糕。

有沒有辦法在完成發送數據時執行某些操作？ 我正在環顧stackoverflow，並且沒有很多帖子直接關於此。 我覺得我必須進入目標iframe並在准備就緒時在那里執行代碼等等。有沒有辦法讓它按照我的意願去做？

我試過的選項：

 $("form#formPost").submit(function(){ customFunction(); });

Answer 1

Coworker創造了一個能夠做到這一點的功能。

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

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

此函數采用您提交的表單，表單目標iframe和將成功執行的anon函數。

Answer 2

如果您以傳統方式提交表單，那么您實際上是在說“我已經完成了這個頁面。這里有一堆表單數據供您，Web服務器使用，以呈現我的下一頁”。 Web服務器獲取表單數據並返回到下一頁的瀏覽器。

如果您不希望重新加載頁面，可以使用Ajax提交表單。 使用jQuery非常簡單：

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

使用Ajax，您可以在提交完成，成功完成以及出現錯誤時定義明確的事件。

我不建議使用隱藏iframe的方法。 Ajax更適合這種類型的處理。

UPDATE

這是一個如何構建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()

或者，您可以嘗試在評論中建議的插件，這與上面鏈接的答案中的解決方案相同。

Answer 3

也許最容易做的就是在iframe上附加一個onload事件。 表單完成提交后，事件將觸發。