如何确定按下了哪个提交按钮,形成 onSubmit 事件,没有 jQuery

IT技术 javascript html
2021-02-08 13:50:11

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

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,但我找不到其他浏览器的任何内容。

6个回答
<form onsubmit="alert(this.submitted); return false;">
    <input onclick="this.form.submitted=this.value;" type="submit" value="Yes" />
    <input onclick="this.form.submitted=this.value;" type="submit" value="No" />
</form>

jsfiddle相同

@ 99Problems-Syntaxain'tone 因为 enter 不是屏幕上的提交按钮,根本不是必需的?
2021-03-15 13:50:11
这是如何运作的?我不知道什么是“this.form.submited”。我如何从按钮对象中访问表单?
2021-03-15 13:50:11
该方案简单、优雅、易于实现;为什么有人会更喜欢 Peter Bailey 的解决方案,它非常麻烦并且需要 jquery(原始问题没有指定)超出了我的范围。
2021-03-28 13:50:11
如果表单是由用户按 Enter 提交的,这将不起作用
2021-04-01 13:50:11

不在提交事件处理程序本身中,不。

但是您可以做的是向每个提交添加点击处理程序,这将通知提交处理程序关于点击了哪个。

这是一个完整的示例(为简洁起见,使用 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>
@JeromeJ:编辑此答案以包含示例;希望同行评审能让它通过。(我将其发布为我自己的答案,但问题已关闭)。
2021-03-14 13:50:11
原始问题没有提到或引用 jquery。我们中的许多人不想使用 jquery。
2021-03-19 13:50:11
...或者,您可以通过向表单本身添加一个 onclick 处理程序来捕捉点击,以检查点击的元素是否是提交按钮;在某些情况下,这可能更简单。
2021-03-21 13:50:11
@Peter,如果您检查点击次数,当他们使用 Enter 键或其他任何东西“按下”提交按钮时会发生什么?(它仍然适用于 Chrome,但是)有标准行为吗?
2021-04-04 13:50:11
我不是 100% 了解当前兼容性的最新情况,但一般来说,我会说如果实际上不是重要的点击,请不要检查点击。
2021-04-07 13:50:11

裸露的骨头,但确认工作,例如:

<script type="text/javascript">
var clicked;
function mysubmit() {
    alert(clicked);
}
</script>
<form action="" onsubmit="mysubmit();return false">
    <input type="submit" onclick="clicked='Save'" value="Save" />
    <input type="submit" onclick="clicked='Add'" value="Add" />
</form>

上面的所有答案都非常好,但我清理了一下。

此解决方案会自动将按下的提交按钮的名称放入操作隐藏字段中。页面上的 javascript 和服务器代码都可以根据需要检查操作隐藏字段值。

该解决方案使用 jquery 自动应用于所有提交按钮。

<input type="hidden" name="action" id="action" />
<script language="javascript" type="text/javascript">
    $(document).ready(function () {
        //when a submit button is clicked, put its name into the action hidden field
        $(":submit").click(function () { $("#action").val(this.name); });
    });
</script>
<input type="submit" class="bttn" value="<< Back" name="back" />
<input type="submit" class="bttn" value="Finish" name="finish" />
<input type="submit" class="bttn" value="Save" name="save" />
<input type="submit" class="bttn" value="Next >>" name="next" />
<input type="submit" class="bttn" value="Delete" name="delete" />
<input type="button" class="bttn" name="cancel" value="Cancel" onclick="window.close();" />

然后将这样的代码写入您的表单提交处理程序。

 if ($("#action").val() == "delete") {
     return confirm("Are you sure you want to delete the selected item?");
 }
这取决于在提交表单之前处理的点击事件。会一直这样吗?对于在模式对话框中动态加载的表单,您必须使用委托处理程序并且必须附加它,以便它使用事件目标来确定哪个表单包含单击的元素并确保您的目标隐藏字段在里面那种形式。
2021-03-29 13:50:11

第一个建议:

创建一个 Javascript 变量来引用单击的按钮。让我们称之为buttonIndex

<input type="submit" onclick="buttonIndex=0;" name="save" value="Save" />
<input type="submit" onclick="buttonIndex=1;" name="saveAndAdd" value="Save and add another" />

现在,您可以访问该值。0 表示单击了保存按钮,1 表示单击了 saveAndAdd 按钮。

第二个建议

我处理这个问题的方法是创建两个 JS 函数来处理这两个按钮中的每一个。

首先,确保您的表单具有有效的 ID。对于这个例子,我会说 ID 是“myForm”

改变

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

<input type="submit" onclick="submitFunc();return(false);" name="save" value="Save" />
<input type="submit" onclick="submitAndAddFunc();return(false);" name="saveAndAdd" value="Save and add 

return(false) 将阻止您的表单提交实际处理,并调用您的自定义函数,您可以稍后在其中提交表单。

然后你的功能将像这样工作......

function submitFunc(){
    // Do some asyncrhnous stuff, that will later on submit the form
    if (okToSubmit) {
        document.getElementById('myForm').submit();
    }
}
function submitAndAddFunc(){
    // Do some asyncrhnous stuff, that will later on submit the form
    if (okToSubmit) {
        document.getElementById('myForm').submit();
    }
}
隐藏的领域?为了什么?
2021-03-17 13:50:11
#2 不起作用 - 当您使用基于 DOM 的事件处理程序时,在return语句之后不会执行任何操作所以你对submitFunc()的调用submitAndAddFunc()永远不会触发。
2021-03-25 13:50:11
接得好。颠倒了调用顺序。
2021-04-07 13:50:11
有点。然后我将不得不在每个提交函数中添加隐藏字段,一个带有 name="save" value="..." 等等,我试图避免这种情况。不要误会我的意思,这是一个有效的解决方案。我只是在寻找更优雅的东西。
2021-04-09 13:50:11