Question

如果表单中有多个提交按钮，有没有办法知道哪一个触发了onsubmit事件而没有向按钮本身添加代码？

修改：我需要在客户端进行检查，即使用JavaScript。

Answer 1

“提交”事件不会被按钮触发，而是由“表单”触发。快速测试证明了这一点：

  <form id="myform">
     <input id="email" type="text" value="1st Email" />
     <input id="action1" type="submit" value="Action 1" />
     <input id="action2" type="submit" value="Action 2" />
  </form>

  <script type="text/javascript">

     document.getElementById("myform").onsubmit = function(evt)  {
        var event = evt || window.event;
        alert(event.target.id); // myform
        alert(event.explicitOriginalTarget.id); // action2 (if action2 was clicked)
                                                // but only works in firefox!
     }

  </script>

虽然在firefox中，您可以在事件上使用event.explicitOriginalTarget属性来获取被单击的输入（提交），从而导致触发提交事件。（如果你想知道的话）

所以最好的选择是：

您的提交按钮具有不同的值或
将这些作为普通按钮并通过javascript点击处理程序。

Answer 2

我可以想到几种方法。

您可以使用不同的值，而不引人注目的javascript可以帮助您。

关于这种方法的一个讨论（使用每个按钮的不同值）在这里：

http://www.chami.com/tips/internet/042599I.html

我倾向于为每个按钮使用不同的name属性。

上面有一个博客：http://www.codetoad.com/javascript/multiple.asp

我不遵循其中任何一种，哪种方法效果最好取决于不同的因素，例如，您是在javascript中处理提交按钮，还是服务器获取表单，然后必须弄清楚用户想要的是什么。

就个人而言，我更喜欢使用ajax方法，现在，我只是在页面加载后将事件附加到按钮上，使用不显眼的javascript，然后根据用户选择调用正确的函数，但这取决于是否可以添加脚本链接到html页面。

<强>更新

为了使用javascript执行此操作，最简单的方法是在单击按钮时附加事件，然后查看名称以决定如何处理它。

实际上，表单永远不必真正提交给服务器，但您可以通过包装参数（选项）并将它们发送到服务器来处理后台的所有内容，并让用户知道结果。 / p>

Answer 3

每个按钮上的事件监听器是否都算作添加代码？否则，无法看到哪个按钮触发了提交事件，除非您想要在事件期间沮丧并计算鼠标位置并将其与按钮位置进行比较。

否则，下一个最好的方法是为按钮的click事件分配一个事件处理程序，并将该按钮的名称分配给您可以在表单的提交事件中检查的变量。

Answer 4

很抱歉热身这个非常老的帖子。这里没有回答这个问题，但之前只提出了实际解决方法的方法。

但是事件对象确实带有关于哪个对象已启动它的信息。在处理程序 b4submit（e）中，您可以像这样获得提交按钮：

function b4submit(e) {
    var but = e.originalEvent.explicitOriginalTarget;
    ...
}

但它是一个HTML对象，包含您为其指定的所有属性，如名称，ID，值等。

我经过一些调试后发现了这个问题，我认为这可能是一个更广泛的兴趣，作为解决这个问题的清洁解决方案。

如何知道哪个提交按钮触发了onsubmit事件

4 个答案: