表单onSubmit确定按下了哪个提交按钮[重复]

小编典典

表单onSubmit确定按下了哪个提交按钮[重复]

javascript

我有一个带有两个提交按钮和一些代码的表单：

HTML：

<input type="submit" name="save" value="Save" />
<input type="submit" name="saveAndAdd" value="Save and add another" />

JavaScript：

form.onSubmit = function(evnt) {
    // Do some asyncrhnous stuff, that will later on submit the form
    return false;
}

当然，这两个提交按钮完成不同的事情。有没有一种方法可以找出onSubmit按下了哪个按钮，所以以后我可以这样做thatButton.click()吗？

理想情况下，我不想修改按钮的代码，而只是具有这种行为的纯JavaScript插件。

我知道Firefox具有evnt.explicitOriginalTarget，但是我找不到其他浏览器的任何内容。

阅读 346

2020-05-01

共1个答案

小编典典

不在提交事件处理程序中，不。

但是您可以做的是在每个提交中添加单击处理程序，这将通知提交处理程序单击了哪个。

这是一个完整的示例（为简洁起见，使用jQuery）

<html>
<head>
  <title>Test Page</title>
  <script src="http://code.jquery.com/jquery-latest.js"></script>
  <script type="text/javascript">

  jQuery(function($) {
      var submitActor = null;
      var $form = $('#test');
      var $submitActors = $form.find('input[type=submit]');

      $form.submit(function(event) {
          if (null === submitActor) {
              // If no actor is explicitly clicked, the browser will
              // automatically choose the first in source-order
              // so we do the same here
              submitActor = $submitActors[0];
          }

          console.log(submitActor.name);
          // alert(submitActor.name);

          return false;
      });

      $submitActors.click(function(event) {
          submitActor = this;
      });
  });

  </script>
</head>

<body>

  <form id="test">

    <input type="text" />

    <input type="submit" name="save" value="Save" />
    <input type="submit" name="saveAndAdd" value="Save and add another" />

  </form>

</body>
</html>

2020-05-01