表单完成提交后执行 javascript

Posted 2023-02-22

【中文标题】表单完成提交后执行 javascript

【英文标题】：executing javascript after a form finishes submitting

【发布时间】：2012-09-11 01:43:09

【问题描述】：

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

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

这个例子似乎在触发 customFunction() 之前没有完成提交，这对我的设计非常不利。

有没有办法做一些事情，当它完成发送数据时会触发？我在***上环顾四周，并没有很多关于这个的帖子。我觉得我必须进入目标 iframe 并在它准备好时执行那里的代码等。有没有办法让它按照我的意愿去做？

我尝试过的选项：

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

【问题讨论】：

看看这个：***.com/a/12288370/405117

@thecodeparadox 我不认为它会允许将文件和隐藏元素类型发送到服务器。

【参考方案1】：

同事创建了一个函数来做这个。

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

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

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

【讨论】：

不使用jQuery的人；使用 #5: frame.onload = null #8: frame.onload = callback;

你好 Fallenreaper，我正在尝试在类似的情况下实现这一点。作为 js 的新手，你能解释一下有人会如何实现它吗？我试图让我的代码等待表单提交，然后将用户重定向到新页面。编辑：这实际上是我为这个问题提出的一个问题：***.com/questions/48269685/…

在我的示例中，表单将更改框架的位置，因此当表单提交时，它将更改框架而不是主机页面。然后你可以看到框架有一个绑定的加载，它将执行你定义的 SuccessFunction。

所以只是为了澄清（抱歉，我仍在学习网络开发的进出），我需要将此功能附加到“保存”按钮并定义一个成功功能（实际上可能是我相信我的 PreSave 功能）。我遵循正确吗？另外，我还需要为其他参数提供什么？也许你可以给我指出一篇关于这些东西的好文章（我以前从未接触过这些东西）。再次感谢您的帮助！

这个函数有3个参数，你提交的表单，页面上的一个框架，你的成功回调。在您的代码中，您将调用此函数。此用例附加到与表单本身无关的任何可点击内容。例如锚标记。在这种情况下，表单和框架是 jQuery 对象。这不是预提交函数，成功函数将是调用成功后发生的情况。

【参考方案2】：

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

如果您不希望页面重新加载，您可以使用 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://***.com/a/5513570/141172中的cmets

你可以试试：

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

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

【讨论】：

您是否错过了针对隐藏 iframe 的表单的全部内容？

不，我没有。这是完成 Ajax 更好的工作的一种笨拙方式。

如果我用 ajax 来做，我将如何在表单中完成不同的隐藏或文件类型元素？

我将 ajax 用于大多数其他事情，并且像 ajax 一样，我的目标是在成功时执行该功能。我只是不知道该怎么做。如果你能帮我设置一个将 N 个隐藏元素和 N 个文件元素发送到某个 url 的 ajax 调用，那可能会起作用。

@EricJ。我的意思不是垃圾邮件。如果这是可能的。您能否向我展示一个示例，说明如何将包含 2 个隐藏元素和 2 个文件元素的表单转换为合适的 ajax 请求。在通过 ajax 上传文件时，我一直遇到障碍。

【参考方案3】：

也许最简单的做法是在 iframe 上附加一个 onload 事件。当表单完成提交后，该事件将触发。

【讨论】：

在主页面上，我试图做 $("frame#hider").ready(function()...);这并没有真正奏效。

我试过了，但没用。我的意思是，我想我也可以尝试等效的 jquery 来看看它是否有效。 $().onload 但我尝试的是： document.frames["imageCollector"].onload = function () top.document.frames['formDesignContents'].location = "WebFormDesigner.aspx?fm_id=" + top .SELECTED_FM_ID； ;

同事看了看，将你的想法封装在一个函数中。