具有 JS 操作的多个 HTML 表单 - 如何禁用第二个按钮（提交）直到第一个（计算）按钮被点击？答案

【问题标题】：Multiple HTML forms with JS actions - how to disable second button (submit) until first (calculate) button clicked?具有 JS 操作的多个 HTML 表单 - 如何禁用第二个按钮（提交）直到第一个（计算）按钮被点击？
【发布时间】：2014-10-19 05:52:05
【问题描述】：

我从来没有做过这种双重输入的事情，我正在挠头，试图禁用“主表单”上的提交按钮，直到初步表单的计算完成。

必须这样做才能传递下一页所需的值：

<input type="button" value="Calculate" onClick="calcRoute();">

在页面底部，我有一个提交按钮，可以转到下一页，单独的形式如下：

<form method="post" name="sendvalues" action="confirm_p2p.php" onsubmit="$.post('confirm_p2p.php';">
....
<input type="submit" name="submit" onclick="setValue();"/>

问题在于第一个计算按钮是两个输入字段，因此用户总是在填写第二个字段后按 Enter。我试过写一行写着“在提交之前点击这个按钮”，但即使在我的小用户测试中，每个人都在计算表格完成后按下回车键。

是否可以在按下第一个计算按钮之前禁用输入提交？我已经尝试过在此处找到的其他禁用内容，但它与计算表单获取我需要传递的数字的能力相混淆。

【问题讨论】：

动态添加的事件监听器比使用事件属性灵活得多。他们将使解决方案更简单。
简易模式：设置一个<input type="checkbox" style="display: none;" required />，由calcRoute检查

标签： javascript input forms

【解决方案1】：

要禁止提交表单，您需要在其onsubmit 事件发生时调用event.preventDefault。您希望它最初被禁用，然后在单击第一个按钮后启用。

在sendvalues 表单上，设置

onsubmit="event.preventDefault(); return false;"`

禁用它。

在Calculate 按钮上，设置

onclick="calcRoute(); document.getElementsByName('sendvalues')[0].onsubmit='$.post(\'confirm_p2p.php\');';"

这将启用您的其他表单并执行您的 POST 请求（确保它是同步的，否则浏览器将在完成之前导航到 action 页面）。

您应该注意 AJAX 请求不会发送表单数据。我不知道您要做什么，但您当前的设置无法按预期工作。

【讨论】：

成功了！我仍然想知道它究竟是如何工作的，但我会确保弄清楚它以备将来使用。谢谢一百万。
@kingsofcalabria：您几乎可以取消任何活动，因此如果您取消onsubmit（通过 on submit 属性中的代码），表单将不会被提交。直到您删除取消代码并且它可以再次正常运行。

【解决方案2】：

当然，您可以按照您的要求通过 JavaScript 提交表单并编写验证代码；但是，更好的解决方案可能是使用您输入的onblur 事件在不按按钮的情况下进行计算。

如果没有你的完整代码很难说，但如果你能展示更多，我可能会更好地解释。

【讨论】：