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