表单onSubmit确定哪个提交button被按下
我有两个提交button和一些代码的forms：
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; }
当然，这两个提交button完成不同的事情。 有没有办法find在onSubmit哪个button被按下，所以后来我可以提交做的thatButton.click() ？
理想情况下，我想不修改button的代码，只是有一个纯粹的JavaScript插件，有这种行为。
我知道FF有evnt.explicitOriginalTarget但我找不到其他浏览器的任何东西。
不在提交事件处理程序本身，不。
但是，你可以做的是添加点击处理程序，每个提交将通知提交处理程序，哪些被点击。
这里有一个完整的例子（简洁地使用jQuery）
<html> <head> <title>Test Page</title> <script src="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>
<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>
以上所有的答案都非常好，但我清理了一下。
该解决scheme自动将提交button的名称按下到动作隐藏字段中。 页面上的JavaScript和服务器代码都可以根据需要检查动作隐藏字段值。
该解决scheme使用jQuery自动应用于所有提交button。
<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?"); }
光秃秃的骨头，但确认工作，例如：
<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>
第一条build议：
创build一个JavaScriptvariables，它将引用单击的button。 让我们叫它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表示保存button被点击，1表示saveAndAddbutton被点击。
第二个build议
我将处理这个方法是创build两个JS函数来处理每个button。
首先，确保你的表单有一个有效的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
返回（false）将阻止表单提交实际处理，并调用您的自定义函数，以后可以提交表单。
那么你的function就是这样的
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(); } }
OP表示他不想修改button的代码。 这是我可以用其他答案作为指导的最不干扰的答案。 它不需要额外的隐藏字段，允许你完整地保留button代码（有时你不能访问产生它的东西），并且给你从代码中任何地方寻找的信息…哪个button被用来提交表格。 我还没有评估如果用户使用Enter键提交表单而不是点击会发生什么。
<script language="javascript" type="text/javascript"> var initiator = ''; $(document).ready(function() { $(":submit").click(function() { initiator = this.name }); }); </script>
然后，您可以访问任何可能需要执行检查的“启动器”variables。 希望这可以帮助。
〜斯潘基
为什么不循环input，然后添加onclick处理程序到每个？
你不必在HTML中这样做，但你可以添加一个处理程序到每个button，如：
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 }
我用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();
等等，你说。 如果你不小心，这将循环。 所以，有时候，提交必须返回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; }
