表单完成提交后执行javascript

我试图用表单将一些文件提交到我的数据库。 表单具有隐藏iframe的目标。 当它完成加载时，我想要显示一条消息。

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

这个例子似乎没有在触发customFunction（）之前完成提交，这对我正在设计的内容非常糟糕。

有没有办法在完成发送数据时执行某些操作？ 我正在环顾stackoverflow，并且没有很多post直接关于此。 我觉得我必须进入目标iframe，并在准备就绪时在那里执行代码，等等。有没有办法让它按我的意愿去做？

我试过的选项：

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

Answer 1

Coworker创造了一个能够做到这一点的function。

 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的示例

 
  
 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事件。 表单完成提交后，该事件将触发。