一个表单，多个提交按钮和提交链接

Question

我有一个带有多个提交按钮的网络表单。为了确定按下了哪个按钮，每个按钮都有一个不同的名称，如下所示：

可能是重复问题:
HTML表单中的多个提交按钮

我有一个带有多个提交按钮的Web表单。为了确定按下了哪个按钮，每个按钮都有一个不同的名称，例如：

<input type="submit" name="foo" value="Foo Foo">

在表单中，还有像这样充当提交按钮的普通链接：

<a href="" onclick="parentNode.submit();return false;">
Bar
</a>

我该如何区分链接和提交按钮？

我不确定这是否相关：
这是表单的开头。

<form action="foobar" method="post" enctype="multipart/form-data">

我正在使用基于Werkzeug的微框架Flask，它使用Python（在这种情况下为2.6版本）。

- Jon Cox

---

不是重复问题，请在将其标记为重复之前阅读完整个问题。另一个被认为是重复的问题是关于多个按钮情况下按下Enter键时的默认操作。 - Basel Shishani

Answer 1

我的第一个问题是，你是否需要那么多不同的方式来提交同一个表单？这听起来像是你的设计应该改变，使其更简单易用，这将解决你的问题。

如果你绝对必须要有所有不同的提交按钮/链接，并且需要知道哪个被按下了，可以使用以下方法：

<input type="hidden" id="submitClicked" />
<input type="submit" onclick="javascript:document.getElementById('submitClicked').value='linkName';return true;" id="linkName">Submit</input>

注意：我没有测试过这段代码，只是凭想象写出来的，因此可能需要进行一些修改。

- Nathan Wheeler

---

太好了，谢谢你的回答。你说得对，简化表格可能会简化其他事情 - 但是这次没有足够的时间。也许以后可以再回来考虑一下。 - Jon Cox

Answer 2

你可以创建一个名为submitSource的隐藏输入框，并从链接或按钮的onclick事件处理程序中设置其值。然后你可以在服务器端检查该值。

- D'Arcy Rittich

Answer 3

另一个你应该考虑的解决方案是：使用<input type="submit">作为“提交链接”的按钮，就像普通的提交按钮一样，并使用CSS将它们样式化成链接的外观。

这有两个巨大的优点，它将（a）不需要任何可能会破坏的额外代码而工作，并且（b）可以在这个世界上的每个浏览器上工作。

- RoToRa

---

+1 和 (c) 即使 JavaScript 被禁用也能正常工作。这个答案真的很难反驳。 - T.J. Crowder

再次感谢提供解决问题的另一种方法 :-) CSS确实非常有用。 - Jon Cox

在使用带样式的提交按钮时，我缺少a:hover样式功能，因此我更喜欢使用带有 onclick='getElementById("hiddenInput").value="action1";document.namedform.submit();' 的链接。 - ajo

@ajo：我非常确定:hover在按钮上可以完美地工作，即使不行，你也可以在JavaScript中实现悬停效果，以确保实际功能不受影响。 - RoToRa

Answer 4

我建议您不要使用onclick="parentNode.submit();return false;"，而是创建一个JS函数，所有链接都调用该函数以执行提交。然后，您可以使用隐藏字段、获取变量或其他方式来传输链接的ID。

function submitMe(linkID)
{
    document.getElementById("hfWhichButtonSubmittedMe").value = linkID;
    document.getElementById(linkID).parentNode.submit();
    return false;
}

...

<a href="" id="mySubmitLink1" onclick="return submitMe('mySubmitLink1');">blah blah</a>

- Joel Etherton

Answer 5

RedFilter的回答肯定是一个可靠的方法，但这里还有另一个选项：

我通常为所有提交按钮使用一个名称（例如“command”），因为只有其中一个会被发送。然后我的服务器端代码只需查看该字段的值即可确定要执行什么操作。

您的提交链接可以将“command”参数附加到表单的操作中，例如：

<a href="" onclick="parentNode.action += "?command=bar"; parentNode.submit(); return false;">

即使您不想使用一个名称，这个概念仍然适用，例如：

<a href="" onclick="parentNode.action += "?bar=bar+bar"; parentNode.submit(); return false;">

当然，如果您执行上述任何一项操作并且您的表单使用POST而不是GET（大多数表单都是这样），那么您从服务器获取参数值的方式将取决于您使用的服务器端机制。例如，Java的ServletRequest#getParameter方法不关心，它会查找GET和POST数据，而其他一些技术则更加区分。这不是问题，您只需要确保从正确的位置获取即可。

- T.J. Crowder

---

感谢提供另一种解决方案。拥有多种选择总是很有用（也更有趣）。 - Jon Cox