javascript 如何确定哪个提交按钮被按下，表单onSubmit事件，没有jQuery [duplicate]

cwtwac6a 于 2023-02-15 发布在 Java

关注(0)|答案(8)|浏览(186)

- 此问题在此处已有答案**：

How can I get the button that caused the submit from the form submit event?（22个答案）
Determine which element triggered a form submit event（3个答案）
九年前就关门了。
此帖子已在1年前编辑并提交审核，未能重新打开帖子：
原始关闭原因未解决
我有一个表单，有两个提交按钮和一些代码：
超文本：

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

JavaScript语言：

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

当然，这两个提交按钮完成的是不同的事情，有没有办法在onSubmit中找出哪个按钮被按下了，这样以后我就可以通过thatButton.click()提交了？
理想情况下，我不想修改按钮的代码，只是有一个纯JavaScript插件，有这个行为。
我知道Firefox有evnt.explicitOriginalTarget，但我找不到其他浏览器的任何东西。

JavaScript

来源：https://stackoverflow.com/questions/3577469/how-to-determine-which-submit-button-was-pressed-form-onsubmit-event-without-j

8条答案

按热度按时间

wnrlj8wa1#

<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表示相同

赞(0）回复(0）举报 2023-02-15

qhhrdooz2#

不在提交事件处理程序本身中，没有。
但是，您 * 可以 * 做的是向每个提交添加单击处理程序，它将通知提交处理程序哪个被单击了。
下面是一个完整的示例（为简洁起见，使用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>

赞(0）回复(0）举报 2023-02-15

pxiryf3j3#

裸骨，但确认工作，例如：

<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>

赞(0）回复(0）举报 2023-02-15

zujrkrfu4#

上面所有的答案都很好，但是我稍微整理了一下。
这个解决方案会自动将按下的提交按钮的名称放入动作隐藏域，页面上的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?");
 }

赞(0）回复(0）举报 2023-02-15

tjvv9vkg5#

- 第一个建议：**

创建一个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();
    }
}

赞(0）回复(0）举报 2023-02-15

hgtggwj06#

操作员说他不想修改按钮的代码。这是我可以用其他答案作为指导得出的最不打扰的答案。它不需要额外的隐藏字段，允许您保持按钮代码不变（有时您无法访问生成它的内容），并从代码的任何地方提供您要查找的信息......哪个按钮用于提交表单。我还没有评估如果用户使用Enter键提交表单会发生什么情况，而不是点击。

<script language="javascript" type="text/javascript">

    var initiator = '';
    $(document).ready(function() {
        $(":submit").click(function() { initiator = this.name });
    });

</script>

然后你可以在任何需要检查的地方访问“initiator”变量。希望这能有所帮助。
~打屁股

赞(0）回复(0）举报 2023-02-15

9gm1akwq7#

我使用Ext，所以我最终这样做：

var theForm = Ext.get("theform");
var inputButtons = Ext.DomQuery.jsSelect('input[type="submit"]', theForm.dom);
var inputButtonPressed = null;
for (var i = 0; i < inputButtons.length; i++) {
    Ext.fly(inputButtons[i]).on('click', function() {
        inputButtonPressed = this;
    }, inputButtons[i]);
}

然后到了提交的时候我提交了

if (inputButtonPressed !== null) inputButtonPressed.click();
else theForm.dom.submit();

等等，你说，如果你不小心的话，这个会循环，所以onSubmit有时候必须返回true

// Notice I'm not using Ext here, because they can't stop the submit
theForm.dom.onsubmit = function () {
    if (gottaDoSomething) {
        // Do something asynchronous, call the two lines above when done.
        gottaDoSomething = false;
        return false;
    }
    return true;
}

赞(0）回复(0）举报 2023-02-15

6tr1vspr8#

为什么不循环输入，然后给每个输入添加onclick处理程序呢？
您不必在HTML中执行此操作，但可以为每个按钮添加一个处理程序，如下所示：

button.onclick = function(){ DoStuff(this.value); return false; } // return false; so that form does not submit

然后，你的函数可以根据你传递的值“做一些事情”：

function DoStuff(val) {
    if( val === "Val 1" ) {
        // Do some stuff
    }
    // Do other stuff
}

赞(0）回复(0）举报 2023-02-15

我来回答

javascript 如何确定哪个提交按钮被按下，表单onSubmit事件，没有jQuery [duplicate]

8条答案

相关问题

热门标签

最新问答