隐藏输入按钮上的 .click() 不起作用（未定义）

Question

我花了几个小时阅读了无数的 Whosebug，但我无法让它工作。

我有一个表单（Wordpress 中的 Caldera 表单），它有一个提交按钮（实际上它是一个输入标签）。通过 JS 我添加了一个事件侦听器，因为我想将表单数据备份到我的数据库中。事件侦听器行：

document.querySelector(".submit-permanently").addEventListener("click", handleIorSaveClick);

handleIorSaveClick 函数很好地完成了这项工作，到目前为止一切都很好。但是，它现在不再提交表单了。尽管我没有在任何地方包含“防止默认”声明。它只是调用我的 handleIorSaveClick 函数（它执行数据库魔法），仅此而已。表单不再提交。

因此我想到了放置一个看起来像提交按钮的假按钮，同时使真正的提交按钮不可见。如果用户点击假按钮，事件侦听器调用 handleIorSaveClick 函数，我想从那里 在数据库魔术完成后自动点击“真实”提交按钮 。

为此，我添加了以下三行代码：

document.querySelectorAll('.real-submit')[0].style.visibility = "visible";
document.querySelectorAll('.real-submit')[0].style.display = "inline";
document.querySelectorAll('.real-submit')[0].click();

奇怪的是前两行正在执行：按钮变得可见。但是第三行（在我的脑海中）应该模拟用户点击那个按钮来实际提交表单不会发生。我什至可以 select chrome 开发控制台中的按钮 document.querySelectorAll('.real-submit')[0] 但这是给我遇到了 undefined 错误： document.querySelectorAll('.real-submit')[0].click();

任何人都可以帮助我告诉我为什么 .click() 什么都不做或告诉我为什么事件侦听器阻止表单在第一个提交地点？

Answer 1

你可以做两件事，在您的第一种方法中，在不制作伪造的提交按钮的情况下，在 handleIorSaveClick() 函数的末尾，从“.submit-permanently”按钮取消绑定事件侦听器，然后调用

document.querySelectorAll('.real-submit')[0].click();

或者在你的第二种情况下，而不是

document.querySelectorAll('.real-submit')[0].click();

就这样做：

document.getElementById("myForm").submit();

隐藏输入按钮上的 .click() 不起作用（未定义）

.click() on hidden input button doesn't work (undefined)

javascript

wordpress

jquery

click

undefined