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

Question

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

Get*_*ree 10 javascript dhtml dom-events

如果表单中有多个提交按钮,有没有办法知道哪一个触发了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>

Run Code Online (Sandbox Code Playgroud)

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

所以最好的选择是:

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

Answer 2

小智 2

对象有一个submitter属性SubmitEvent。

参见示例：

<!DOCTYPE html>
<html>
<body>
<form action="./test.html" onsubmit="myFunction(event)">
  Enter name: <input type="text" name="fname">
  <button id="firstButton" type="submit">Button 1</button>
  <button id="secondButton" type="submit">Button 2</button>
</form>

<script>
function myFunction(event) {
  // This should log id of the button that was used for submition
  console.log(event.submitter.id); 

  // Prevent sending the form (just for testing)
  event.preventDefault();
}
</script>

</body>
</html>

Run Code Online (Sandbox Code Playgroud)

请参阅https://developer.mozilla.org/en-US/docs/Web/API/SubmitEvent/submitter

归档时间：	15 年，3 月前
查看次数：	7357 次
最近记录：	6 年，1 月前