在表单完成提交后执行javascript

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

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

这个例子似乎在启动customFunction（）之前还没有完成提交，这对我的设计非常不利

有没有一种方法可以在完成数据发送后触发？我在stackoverflow上四处看看，没有多少直接关于这个的帖子。我觉得我必须进入目标iframe，并在它准备好的时候执行其中的代码，等等。有没有办法让它按我想要的方式运行

我尝试过的选项：

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

---

如果您以传统的方式提交表单，您实际上是在说“我已经完成了这个页面。这里有一组表单数据供您web服务器呈现我的下一个页面”。web服务器获取表单数据并在下一页返回浏览器

如果不希望重新加载页面，可以使用Ajax提交表单。对于jQuery，这非常简单：

使用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 });

---

或者，您可以尝试您在评论中建议的插件，这与上面链接的答案中的解决方案相同。

也许最简单的方法是在iframe上附加一个

onload

事件。表单提交完成后，事件将触发。

同事创建了一个函数，该函数可执行此操作

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

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

---

此函数采用您正在提交的表单、表单目标iframe和一个成功后将执行的anon函数。

您是否错过了表单目标隐藏iframe的全部内容？不，我没有。这是一种很难用Ajax实现更好功能的方法。如果我用Ajax实现，我将如何实现表单中不同的隐藏元素或文件类型元素？@EricJ。我不是故意发垃圾邮件的。如果可能的话。您能给我举个例子，说明如何将包含2个隐藏元素和2个文件元素的表单转换为一个合适的ajax请求，这将非常好。当涉及到通过ajax上传文件时，我总是遇到障碍。downvoter：从常见问题解答：最重要的是，诚实。如果你看到错误的信息，就否决它。添加注释，指出具体错误。提供你自己的更好答案。最好的-编辑和改进现有的问题和答案！请检查：@thecodeparadox我不认为它会允许将文件和隐藏的元素类型发送到服务器；但这并没有真正起作用。我试过了，但没有起作用。我的意思是，我想我也可以试试jquery等价物，看看它是否有效$（）.onload但我尝试的是：document.frames[“imageCollector”]。onload=function（）{top.document.frames['formDesignContents'].location=“WebFormDesigner.aspx？fm_id=“+top.SELECTED_fm_id；”；同事看了一下，并将您的想法封装在一个函数中；使用#5:frame.onload=null#8:frame.onload=callback；你好，Fallerenreaper，我正在尝试在类似的情况下实现它。对于js来说是相当陌生的，你能解释一下有人会如何实现这个吗？我试图让我的代码等待表单提交，然后将用户重定向到新页面。编辑：这里实际上是我为这个问题提出的一个问题：在我这里的示例中，表单将更改框架的位置，因此当表单提交时，它将更改框架而不是主机页。然后您可以看到框架有一个绑定onload，它将执行您定义的SuccessFunction。因此，为了澄清（抱歉，我仍在学习web dev的输入和输出），我需要将此函数附加到“save”按钮并定义一个success函数（我相信它实际上可能是我的PreSave函数）。我跟对了吗？另外，我还需要为其他参数提供什么？也许你可以给我指一篇关于这些东西的好文章（我以前从未接触过这些东西）。再次感谢你的帮助！此函数包含3个参数：您提交的表单、页面上的一个框架以及您的成功回调。在代码中，可以调用此函数。此用例附加到任何与表单本身无关的可单击内容。例如，锚定标记。在本例中，表单和框架是jQuery对象。这不是预提交函数，成功函数是调用成功后发生的事情。

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

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