blocks|key|947912|text|第一个建议：|type|unstyled|depth|inlineStyleRanges|offset|length|style|BOLD|entityRanges|data|947913|创建一个Javascript变量，它将引用所单击的按钮。让我们称其为buttonIndex|947914|<input+type="submit"+onclick="buttonIndex=0;"+name="save"+value="Save"+/>
<input+type="submit"+onclick="buttonIndex=1;"+name="saveAndAdd"+value="Save+and+add+another"+/>|code-block|syntax|javascript|947915|现在，您可以访问该值。0表示单击了保存按钮，1表示单击了saveAndAdd按钮。|947916|第二条建议|947917|我的处理方法是创建两个JS函数，分别处理这两个按钮。|947918|首先，确保您的表单有一个有效的ID。|947919|更改|947920|<input+type="submit"+name="save"+value="Save"+/>
<input+type="submit"+name="saveAndAdd"+value="Save+and+add+another"+/>|947921|到|947922|<input+type="submit"+onclick="submitFunc();return(false);"+name="save"+value="Save"+/>
<input+type="submit"+onclick="submitAndAddFunc();return(false);"+name="saveAndAdd"+value="Save+and+add+|947923|返回(False)将阻止您的表单提交实际处理，并调用您的自定义函数，您可以在稍后提交表单。|947924|然后你的函数将会像这样工作...|947925|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();
++++}
}|947926|entityMap^0|0|6|0|0|0|0|0|5|0|0|0|0|2|0|0|0|1|0|0|0|0|G|0|0^^$0|@$1|2|3|4|5|6|7|1A|8|@$9|1B|A|1C|B|C]]|D|@]|E|$]]|$1|F|3|G|5|6|7|1D|8|@]|D|@]|E|$]]|$1|H|3|I|5|J|7|1E|8|@]|D|@]|E|$K|L]]|$1|M|3|N|5|6|7|1F|8|@]|D|@]|E|$]]|$1|O|3|P|5|6|7|1G|8|@$9|1H|A|1I|B|C]]|D|@]|E|$]]|$1|Q|3|R|5|6|7|1J|8|@]|D|@]|E|$]]|$1|S|3|T|5|6|7|1K|8|@]|D|@]|E|$]]|$1|U|3|V|5|6|7|1L|8|@$9|1M|A|1N|B|C]]|D|@]|E|$]]|$1|W|3|X|5|J|7|1O|8|@]|D|@]|E|$K|L]]|$1|Y|3|Z|5|6|7|1P|8|@$9|1Q|A|1R|B|C]]|D|@]|E|$]]|$1|10|3|11|5|J|7|1S|8|@]|D|@]|E|$K|L]]|$1|12|3|13|5|6|7|1T|8|@]|D|@]|E|$]]|$1|14|3|15|5|6|7|1U|8|@$9|1V|A|1W|B|C]]|D|@]|E|$]]|$1|16|3|17|5|J|7|1X|8|@]|D|@]|E|$K|L]]|$1|18|3|-4|5|6|7|1Y|8|@]|D|@]|E|$]]]|19|$]]

<p><strong>First Suggestion:</strong></p>

<p>Create a Javascript Variable that will reference the button clicked. Lets call it <em>buttonIndex</em></p>

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

<p>Now, you can access that value. 0 means the save button was clicked, 1 means the saveAndAdd Button was clicked.</p>

<p><strong>Second Suggestion</strong></p>

<p>The way I would handle this is to create two JS functions that handle each of the two buttons.</p>

<p>First, make sure your form has a valid ID. For this example, I'll say the ID is "myForm"</p>

<p><strong>change</strong></p>

<pre><code>&lt;input type="submit" name="save" value="Save" /&gt;
&lt;input type="submit" name="saveAndAdd" value="Save and add another" /&gt;
</code></pre>

<p><strong>to</strong></p>

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

<p>the return(false) will prevent your form submission from actually processing, and call your custom functions, where you can submit the form later on.</p>

<p><strong>Then your functions will work something like this...</strong></p>

<pre><code>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();
    }
}
</code></pre>


blocks|key|1690267|text|为什么不遍历输入，然后为每个输入添加onclick处理程序？|type|unstyled|depth|inlineStyleRanges|entityRanges|data|1690268|您不必在HTML中执行此操作，但您可以为每个按钮添加一个处理程序，如下所示：|1690269|button.onclick+=+function(){+DoStuff(this.value);+return+false;+}+//+return+false;+so+that+form+does+not+submit|code-block|syntax|javascript|1690270|然后，您的函数可以根据您传递的任何值来“做一些事情”：|1690271|function+DoStuff(val)+{
++++if(+val+===+"Val+1"+)+{
++++++++//+Do+some+stuff
++++}
++++//+Do+other+stuff
}|1690272|entityMap^0|0|0|0|0|0^^$0|@$1|2|3|4|5|6|7|O|8|@]|9|@]|A|$]]|$1|B|3|C|5|6|7|P|8|@]|9|@]|A|$]]|$1|D|3|E|5|F|7|Q|8|@]|9|@]|A|$G|H]]|$1|I|3|J|5|6|7|R|8|@]|9|@]|A|$]]|$1|K|3|L|5|F|7|S|8|@]|9|@]|A|$G|H]]|$1|M|3|-4|5|6|7|T|8|@]|9|@]|A|$]]]|N|$]]

<p>Why not loop through the inputs and then add onclick handlers to each?</p>

<p>You don't have to do this in HTML, but you can add a handler to each button like:</p>

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

<p>Then your function could "do stuff" according to whichever value you passed:</p>

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


blocks|key|4266202|text|不是在提交事件处理程序本身，不是。|type|unstyled|depth|inlineStyleRanges|entityRanges|data|4266203|但您可以做的是向每个提交添加单击处理程序，这将通知提交处理程序单击了哪个提交处理程序。|4266204|下面是一个完整的示例(为简洁起见，使用jQuery+)|4266205|<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>|code-block|syntax|javascript|4266206|entityMap^0|0|0|0|0^^$0|@$1|2|3|4|5|6|7|M|8|@]|9|@]|A|$]]|$1|B|3|C|5|6|7|N|8|@]|9|@]|A|$]]|$1|D|3|E|5|6|7|O|8|@]|9|@]|A|$]]|$1|F|3|G|5|H|7|P|8|@]|9|@]|A|$I|J]]|$1|K|3|-4|5|6|7|Q|8|@]|9|@]|A|$]]]|L|$]]

<p>Not in the submit event handler itself, no.</p>

<p>But what you <em>can</em> do is add click handlers to each submit which will inform the submit handler as to which was clicked.</p>

<p>Here's a full example (using jQuery for brevity)</p>

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

  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;
      });
  });

  &lt;/script&gt;
&lt;/head&gt;

&lt;body&gt;

  &lt;form id="test"&gt;

    &lt;input type="text" /&gt;

    &lt;input type="submit" name="save" value="Save" /&gt;
    &lt;input type="submit" name="saveAndAdd" value="Save and add another" /&gt;

  &lt;/form&gt;

&lt;/body&gt;
&lt;/html&gt;
</code></pre>


blocks|key|947981|text|我使用Ext，所以我最终这样做：|type|unstyled|depth|inlineStyleRanges|entityRanges|data|947982|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%2B%2B)+{
++++Ext.fly(inputButtons[i]).on('click',+function()+{
++++++++inputButtonPressed+=+this;
++++},+inputButtons[i]);
}|code-block|syntax|javascript|947983|然后到了提交的时候，我做到了|947984|if+(inputButtonPressed+!==+null)+inputButtonPressed.click();
else+theForm.dom.submit();|947985|等等，你说。如果你不小心，这将会循环。因此，onSubmit有时必须返回true|947986|//+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;
}|947987|entityMap^0|0|0|0|0|0|0^^$0|@$1|2|3|4|5|6|7|Q|8|@]|9|@]|A|$]]|$1|B|3|C|5|D|7|R|8|@]|9|@]|A|$E|F]]|$1|G|3|H|5|6|7|S|8|@]|9|@]|A|$]]|$1|I|3|J|5|D|7|T|8|@]|9|@]|A|$E|F]]|$1|K|3|L|5|6|7|U|8|@]|9|@]|A|$]]|$1|M|3|N|5|D|7|V|8|@]|9|@]|A|$E|F]]|$1|O|3|-4|5|6|7|W|8|@]|9|@]|A|$]]]|P|$]]

<p>I use Ext, so I ended up doing this:</p>

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

<p>and then when it was time submit I did</p>

<pre><code>if (inputButtonPressed !== null) inputButtonPressed.click();
else theForm.dom.submit();
</code></pre>

<p>Wait, you say. This will loop if you're not careful. So, onSubmit must sometimes return true</p>

<pre><code>// 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;
}
</code></pre>


blocks|key|2856406|text|<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>|type|code-block|depth|inlineStyleRanges|entityRanges|data|syntax|javascript|2856407|jsfiddle用于相同的功能|unstyled|offset|length|2856408|entityMap|0|LINK|mutability|MUTABLE|url|http://jsfiddle.net/dj3QE/^0|0|0|8|0|0^^$0|@$1|2|3|4|5|6|7|Q|8|@]|9|@]|A|$B|C]]|$1|D|3|E|5|F|7|R|8|@]|9|@$G|S|H|T|1|U]]|A|$]]|$1|I|3|-4|5|F|7|V|8|@]|9|@]|A|$]]]|J|$K|$5|L|M|N|A|$O|P]]]]

<pre><code>&lt;form onsubmit=&quot;alert(this.submitted); return false;&quot;&gt;
    &lt;input onclick=&quot;this.form.submitted=this.value;&quot; type=&quot;submit&quot; value=&quot;Yes&quot; /&gt;
    &lt;input onclick=&quot;this.form.submitted=this.value;&quot; type=&quot;submit&quot; value=&quot;No&quot; /&gt;
&lt;/form&gt;
</code></pre>
<p><a href="http://jsfiddle.net/dj3QE/" rel="noreferrer">jsfiddle</a> for the same</p>


blocks|key|4266281|text|基本框架，但已确认工作正常，例如：|type|unstyled|depth|inlineStyleRanges|entityRanges|data|4266282|<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>|code-block|syntax|javascript|4266283|entityMap^0|0|0^^$0|@$1|2|3|4|5|6|7|I|8|@]|9|@]|A|$]]|$1|B|3|C|5|D|7|J|8|@]|9|@]|A|$E|F]]|$1|G|3|-4|5|6|7|K|8|@]|9|@]|A|$]]]|H|$]]

<p>Bare bones, but confirmed working, example:</p>

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


blocks|key|948032|text|上面所有的答案都很好，但我稍微清理了一下。|type|unstyled|depth|inlineStyleRanges|entityRanges|data|948033|此解决方案自动将按下的提交按钮的名称放入操作隐藏字段中。页面上的javascript和服务器代码都可以根据需要检查动作隐藏字段值。|948034|该解决方案使用jquery自动应用于所有提交按钮。|948035|<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();"+/>|code-block|syntax|javascript|948036|然后在表单提交处理程序中编写如下代码。|948037|+if+($("#action").val()+==+"delete")+{
+++++return+confirm("Are+you+sure+you+want+to+delete+the+selected+item?");
+}|948038|entityMap^0|0|0|0|0|0|0^^$0|@$1|2|3|4|5|6|7|Q|8|@]|9|@]|A|$]]|$1|B|3|C|5|6|7|R|8|@]|9|@]|A|$]]|$1|D|3|E|5|6|7|S|8|@]|9|@]|A|$]]|$1|F|3|G|5|H|7|T|8|@]|9|@]|A|$I|J]]|$1|K|3|L|5|6|7|U|8|@]|9|@]|A|$]]|$1|M|3|N|5|H|7|V|8|@]|9|@]|A|$I|J]]|$1|O|3|-4|5|6|7|W|8|@]|9|@]|A|$]]]|P|$]]

<p>All of the answers above are very good but I cleaned it up a little bit.</p>

<p>This solution automatically puts the name of the submit button pressed into the action hidden field.  Both the javascript on the page and the server code can check the action hidden field value as needed.</p>

<p>The solution uses jquery to automatically apply to all submit buttons.</p>

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

<p>Then write code like this into your form submit handler.</p>

<pre><code> if ($("#action").val() == "delete") {
     return confirm("Are you sure you want to delete the selected item?");
 }
</code></pre>


blocks|key|2856523|text|OP声明他不想修改按钮的代码。这是我能想到的干扰最小的答案，我可以使用其他答案作为指南。它不需要额外的隐藏字段，允许您保持按钮代码不变(有时您无法访问生成它的内容)，并为您提供用于提交表单的code...which按钮中任何位置所需的信息。我还没有评估如果用户使用Enter键而不是单击来提交表单会发生什么。|type|unstyled|depth|inlineStyleRanges|entityRanges|data|2856524|<script+language="javascript"+type="text/javascript">

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

</script>|code-block|syntax|javascript|2856525|然后，您可以访问可能需要执行检查的任何位置的“initiator”变量。希望这能有所帮助。|2856526|~斯潘基|2856527|entityMap^0|0|0|0|0^^$0|@$1|2|3|4|5|6|7|M|8|@]|9|@]|A|$]]|$1|B|3|C|5|D|7|N|8|@]|9|@]|A|$E|F]]|$1|G|3|H|5|6|7|O|8|@]|9|@]|A|$]]|$1|I|3|J|5|6|7|P|8|@]|9|@]|A|$]]|$1|K|3|-4|5|6|7|Q|8|@]|9|@]|A|$]]]|L|$]]

<p>OP stated he didn't want to modify the code for the buttons. This is the least-intrusive answer I could come up with using the other answers as a guide. It doesn't require additional hidden fields, allows you to leave the button code intact (sometimes you don't have access to what generates it), and gives you the info you were looking for from anywhere in your code...which button was used to submit the form. I haven't evaluated what happens if the user uses the Enter key to submit the form, rather than clicking.</p>

<pre><code>&lt;script language="javascript" type="text/javascript"&gt;

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

&lt;/script&gt;
</code></pre>

<p>Then you have access to the 'initiator' variable anywhere that might need to do the checking. Hope this helps.</p>

<p>~Spanky</p>


<p>I have a form with two submit buttons and some code:</p>

<p>HTML:</p>

<pre><code>&lt;input type="submit" name="save" value="Save" /&gt;
&lt;input type="submit" name="saveAndAdd" value="Save and add another" /&gt;
</code></pre>

<p>JavaScript:</p>

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

<p>Of course the two submit buttons accomplish different things. Is there a way to find out in <code>onSubmit</code> which button was pressed, so later I could submit by doing <code>thatButton.click()</code>?</p>

<p>Ideally I would like to not modify the code for the buttons, just have a pure JavaScript addon that has this behavior.</p>

<p>I know that Firefox has <code>evnt.explicitOriginalTarget</code>, but I can't find anything for other browsers.</p>


How To Determine Which Submit Button Was Pressed, Form onSubmit Event, Without jQuery

翻译质量差，导致语言生硬或混乱。

没有提供实际的解决方法或示例。

解答不清晰，无法理解或解决问题。

页面排版不美观，阅读体验差。

文章

问答

视频

学习中心

腾讯云实验室

直播

竞赛

腾讯云代码分析专区

腾讯iOA零信任安全管理系统专区

腾讯云架构师技术同盟交流圈

腾讯云数据库专区

腾讯云顾问专区

腾讯云原生专区

腾讯混元专区

腾讯云TCE专区

腾讯云Lighthouse专区

腾讯云HAI专区

腾讯云Edgeone专区

腾讯云存储专区

腾讯云智能专区

腾讯轻联专区 

腾讯云开发专区

TAPD专区

腾讯轻量云游戏服专区

腾讯云最具价值专家

腾讯云架构师技术同盟

腾讯云创作之星

腾讯云开发者先锋

腾讯云代码助手

云原生构建

TAPD 敏捷项目管理

Cloud Studio

SDK中心

API中心

命令行工具

涵盖代码开发、场景应用、自动测试全流程，助你从零构建专属AI助手

一站式MCP教程库，解锁AI应用新玩法

我有一个带有两个提交按钮和一些代码的表单：HTML：<input type="submit" name="save" value="Save" /><input type="submit" name="saveAndAdd" value="Save and add another" />JavaScript：form....

问如何在没有jQuery的情况下确定按下了哪个提交按钮，窗体onSubmit事件
EN

Stack Overflow用户

社区

活动

圈层

关于

腾讯云开发者

热门产品

热门推荐

更多推荐

问如何在没有jQuery的情况下确定按下了哪个提交按钮，窗体onSubmit事件EN