Question

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

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插件。

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

Answer 1

<form onsubmit="alert(this.submited); return false;">
    <input onclick="this.form.submited=this.value;" type="submit" value="Yes" />
    <input onclick="this.form.submited=this.value;" type="submit" value="No" />
</form>

jsfiddle用于相同的

Answer 2

不在提交事件处理程序本身，没有。

但是你可以做的是为每个提交添加点击处理程序，这将通知提交处理程序点击哪个。

这是一个完整的例子（使用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>

Answer 3

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

此解决方案会自动将提交按钮的名称压入操作隐藏字段。页面上的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?");
 }

Answer 4

裸骨，但确认有效，例如：

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

Answer 5

第一条建议：

创建一个引用单击按钮的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(); } }

Answer 6

OP表示他不想修改按钮的代码。这是我用其他答案作为指导可以提出的最不具侵入性的答案。它不需要额外的隐藏字段，允许您保持按钮代码完整（有时您无法访问生成它的内容），并从代码中的任何位置为您提供所需的信息...哪个按钮用于提交表格。我没有评估如果用户使用Enter键提交表单而不是单击，会发生什么。

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

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

</script>

然后您可以在任何可能需要进行检查的地方访问'initiator'变量。希望这会有所帮助。

〜斯潘基

Answer 7

为什么不循环输入然后为每个输入添加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
}

Answer 8

我使用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;
}

表单onSubmit确定按下了哪个提交按钮

8 个答案: