javascript - 禁用双重提交以防止发送提交名称

Question

这个问题已经有答案了:

behavior of javascript getElementById() when there are elements with duplicate IDs in HTML DOM? (5 个回答)

已关闭 7 年前。

我的多表单页面遇到了错误:

我有两种形式:

<form>
<input type="submit" id="single-submit" name="form_1" value="Submit 1"/>
</form>

<form>
<input type="submit" id="single-submit" name="form_2" value="Submit 2"/>
</form>

这个 JavaScript 可以防止重复提交:

$("form").one('submit', function() {
    $('#single-submit').prop("disabled", true);
});

我正在尝试在 php 中获取提交名称:

if(isset($_POST['form_1']))
{
    // form 1 submitted
}

if(isset($_POST['form_2']))
{
    // form 2 submitted
}

但是 JS 阻止了这个，为什么？

我可以收到提交name=""从第二、第三……形式。但不是从页面上的第一个表单开始。

更新:

删除了双 ID，添加了类:

<form action="example.com/process" method="post" accept-charset="utf-8">
<input type="submit" class="single-submit" name="form_1" value="Submit 1"/>
</form>

<form action="example.com/process" method="post" accept-charset="utf-8">
<input type="submit" class="single-submit" name="form_2" value="Submit 2"/>
</form>

这个 JavaScript 可以防止重复提交:

$("form").one('submit', function() {
    $('.single-submit').prop("disabled", true);
});

此外，现在第一个和第二个表单不返回提交名称。

也尝试过on(相反，没有运气。
所以看来JS还是有问题。

没有这个 JS，一切都会按预期工作。

Answer 1

在此使用 class 而不是 id:id="single-submit"。

id 必须是唯一的。