在没有 Ajax 的情况下捕获表单提交事件答案

【问题标题】：Capture form submit event WITHOUT Ajax在没有 Ajax 的情况下捕获表单提交事件
【发布时间】：2019-07-16 00:10:47
【问题描述】：

我需要向端点提交表单，但由于我无法控制 CORS 标头，因此无法使用 AJAX 执行此操作。

我目前通过呈现隐藏的 iframe 并将提交定位到那里来做到这一点。但我仍然无法捕获事件（我猜是因为它在 iframe 的范围内？？）

HTML

<form id="my-form" method="post" action="www.example.com/submission-endpoint" target="hiddenframe" >
    // ... form fields ...
</form>
<iframe width="0" height="0" border="0" name="hiddenframe" style="display:none"></iframe>

document.getElementById("my-form").submit(function(e){

    console.log(e); // does not print to console
});

我对其他实现持开放态度，但我想 (1) 想知道为什么表单提交事件无法访问（没有打印到控制台）以及 (2) 我如何提交此表单没有 em> 使用 XHR/AJAX 仍然触发回调函数并在提交时做一些事情。

【问题讨论】：

标签： javascript ajax xmlhttprequest

【解决方案1】：

(1) 想知道为什么无法访问表单提交事件（没有打印到控制台）

submit() 方法用于以编程方式触发表单提交。

要监听事件，请使用addEventListener("submit", your_function);。

(2) 如何在不使用 XHR/AJAX 的情况下提交此表单，但仍会触发回调函数并在提交时执行一些操作。

以上内容与常规提交按钮结合使用即可。

请注意，虽然您可以检测到用户提交表单的请求，但您将无法读取响应，因为 same-origin policy 仍然适用。

【讨论】：

谢谢！事件监听器对我不起作用的部分原因是因为我们网站上的提交按钮实际上是一个锚标记（出于样式原因），因此表单不会将其识别为 type=submit。

【解决方案2】：

你应该可以通过事件监听器来做到这一点

var form 
form.addEventListener( 'submit', function(e){
    alert("test")
});

【讨论】：

我已经尝试过了，但该事件从未触发。