jQuery:如何获取表单提交时点击哪个button?

我有一个.submit()事件设置为表单提交。 我在页面上也有多种forms,但在这个例子中只有一个。 我想知道哪个提交button被点击,而不是每个应用.click()事件。

这是设置:

 <html> <head> <title>jQuery research: forms</title> <script type='text/javascript' src='../jquery-1.5.2.min.js'></script> <script type='text/javascript' language='javascript'> $(document).ready(function(){ $('form[name="testform"]').submit( function(event){ process_form_submission(event); } ); }); function process_form_submission( event ) { event.preventDefault(); //var target = $(event.target); var me = event.currentTarget; var data = me.data.value; var which_button = '?'; // <-- this is what I want to know alert( 'data: ' + data + ', button: ' + which_button ); } </script> </head> <body> <h2>Here's my form:</h2> <form action='nothing' method='post' name='testform'> <input type='hidden' name='data' value='blahdatayadda' /> <input type='submit' name='name1' value='value1' /> <input type='submit' name='name2' value='value2' /> </form> </body> </html> 

在jsfiddle上的生动的例子

除了在每个button上应用.click()事件之外,有没有办法确定哪个提交button被点击?

我问了同样的问题: 我怎样才能得到从表单提交事件提交的button?

我结束了这个解决scheme,它工作得很好:

 $(document).ready(function() { $("form").submit(function() { var val = $("input[type=submit][clicked=true]").val(); // DO WORK }); $("form input[type=submit]").click(function() { $("input[type=submit]", $(this).parents("form")).removeAttr("clicked"); $(this).attr("clicked", "true"); }); }); 

在你的情况下,您可能需要稍微调整一下,但仍然可以应用

我发现这工作。

 $(document).ready(function() { $( "form" ).submit(function () { // Get the submit button element var btn = $(this).find("input[type=submit]:focus" ); }); } 

这适用于我:

 $("form").submit(function() { // Print the value of the button that was clicked console.log($(document.activeElement).val()); } 

表格提交时:

  • document.activeElement会为您提供被点击的提交button。

  • document.activeElement.getAttribute('value')会给你那个button的值。

这里的方法似乎更清洁我的目的。

首先,对于任何和所有forms:

 $('form').click(function(event) { $(this).data('clicked',$(event.target)) }); 

当这个点击事件触发一个表单时,它只是logging稍后访问的起始目标(在事件对象中可用)。 这是一个非常宽泛的中风,因为它会触发表单上任何地方的任何点击。 优化评论是受欢迎的,但我怀疑它永远不会造成明显的问题。

然后,在$('form')。submit()中,你可以查询最后一次点击的内容

 if ($(this).data('clicked').is('[name=no_ajax]')) xhr.abort(); 

哇,一些解决scheme可能会变得复杂! 如果你不介意使用简单的全局,只要利用inputbutton点击事件首先触发的事实。 可以通过使用$('#myForm input')来进一步过滤$('input')select器中的一种。

  $(document).ready(function(){ var clkBtn = ""; $('input[type="submit"]').click(function(evt) { clkBtn = evt.target.id; }); $("#myForm").submit(function(evt) { var btnID = clkBtn; alert("form submitted; button id=" + btnID); }); }); 

另一种可能的解决scheme是在表单中添加一个隐藏字段:

 <input type="hidden" id="btaction"/> 

然后在就绪function中添加function来logging按下了什么键:

 $('form#myForm #btnSubmit').click(function() { $('form#myForm #btaction').val(0); }); $('form#myForm #btnSubmitAndSend').click(function() { $('form#myForm #btaction').val(1); }); $('form#myForm #btnDelete').click(function() { $('form#myForm #btaction').val(2); }); 

现在在表单submition处理程序中读取隐藏的variables,并根据它来决定:

 var act = $('form#myForm #btaction').val(); 

build立在Stan和yann-h的基础上,但是这个默认为第一个button。 这种整体方法的好处在于,它可以同时获得点击和回车键(即使焦点不在button上),如果你需要允许在表单中input,即斯坦的答案)在我的情况下,即使用户当前的焦点在文本框上,我也想允许input提交表单。

我也使用“名称”属性而不是“ID”,但这是相同的方法。

 var pressedButtonName = typeof $(":input[type=submit]:focus")[0] === "undefined" ? $(":input[type=submit]:first")[0].name : $(":input[type=submit]:focus")[0].name; 

如果你没有添加一个.click事件就意味着你不想为这些事件分开处理,你可以在一个函数中处理所有的点击(提交):

 $(document).ready(function(){ $('input[type="submit"]').click( function(event){ process_form_submission(event); } ); }); function process_form_submission( event ) { event.preventDefault(); //var target = $(event.target); var input = $(event.currentTarget); var which_button = event.currentTarget.value; var data = input.parents("form")[0].data.value; // var which_button = '?'; // <-- this is what I want to know alert( 'data: ' + data + ', button: ' + which_button ); } 

这个为我工作

 $('#Form').submit(function(){ var btn= $(this).find("input[type=submit]:focus").val(); alert('you have clicked '+ btn); } 

我发现最好的解决办法是

 $(document.activeElement).attr('id') 

这不仅适用于input,也适用于button标签。 它也得到button的ID。

 $("form input[type=submit]").click(function() { $("<input />") .attr('type', 'hidden') .attr('name', $(this).attr('name')) .attr('value', $(this).attr('value')) .appendTo(this) }); 

添加隐藏字段

对我来说,最好的解决办法是这样的:

 $(form).submit(function(e){ // Get the button that was clicked var submit = $(this.id).context.activeElement; // You can get its name like this alert(submit.name) // You can get its attributes like this too alert($(submit).attr('class')) }); 

与斯坦答案类似,但是:

  • 如果你有多个button,你只能得到第一个button=> [0]
  • 如果表单可以用回车键提交,你必须pipe理一个默认=> myDefaultButtonId

 $(document).on('submit', function(event) { event.preventDefault(); var pressedButtonId = typeof $(":input[type=submit]:focus")[0] === "undefined" ? "myDefaultButtonId" : $(":input[type=submit]:focus")[0].id; ... } 

这是我使用的解决scheme,工作得很好:

 // prevent enter key on some elements to prevent to submit the form function stopRKey(evt) { evt = (evt) ? evt : ((event) ? event : null); var node = (evt.target) ? evt.target : ((evt.srcElement) ? evt.srcElement : null); var alloved_enter_on_type = ['textarea']; if ((evt.keyCode == 13) && ((node.id == "") || ($.inArray(node.type, alloved_enter_on_type) < 0))) { return false; } } $(document).ready(function() { document.onkeypress = stopRKey; // catch the id of submit button and store-it to the form $("form").each(function() { var that = $(this); // define context and reference /* for each of the submit-inputs - in each of the forms on the page - assign click and keypress event */ $("input:submit,button", that).bind("click keypress", function(e) { // store the id of the submit-input on it's enclosing form that.data("callerid", this.id); }); }); $("#form1").submit(function(e) { var origin_id = $(e.target).data("callerid"); alert(origin_id); e.preventDefault(); }); }); 
 <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script> <form id="form1" name="form1" action="" method="post"> <input type="text" name="text1" /> <input type="submit" id="button1" value="Submit1" name="button1" /> <button type="submit" id="button2" name="button2"> Submit2 </button> <input type="submit" id="button3" value="Submit3" name="button3" /> </form> 

处理这个优秀的答案 ,你可以检查活动元素(button),附加一个隐藏的input到表单,并可以select删除它在提交处理程序的末尾。

 $('form.form-js').submit(function(event){ var frm = $(this); var btn = $(document.activeElement); if( btn.length && frm.has(btn) && btn.is('button[type="submit"], input[type="submit"], input[type="image"]') && btn.is('[name]') ){ frm.append('<input type="hidden" id="form-js-temp" name="' + btn.attr('name') + '" value="' + btn.val() + '">'); } // Handle the form submit here $('#form-js-temp').remove(); }); 

附注:我亲自在通过JavaScript提交的所有表单上添加类form-js

它帮助我https://stackoverflow.com/a/17805011/1029257

只有在提交button被点击后才提交表单。

 var theBtn = $(':focus'); if(theBtn.is(':submit')) { // .... return true; } return false; 

因为我无法对接受的答案发表评论,所以我在这里提出一个修改版本,应该考虑到表单之外的元素(即:使用form属性附加到form )。 这是现代浏览器: http : //caniuse.com/#feat=form-attribute 。 closest('form')用作不支持的form属性的回退

 $(document).on('click', '[type=submit]', function() { var form = $(this).prop('form') || $(this).closest('form')[0]; $(form.elements).filter('[type=submit]').removeAttr('clicked') $(this).attr('clicked', true); }); $('form').on('submit', function() { var submitter = $(this.elements).filter('[clicked]'); }) 

我也提出了一个解决scheme,它运作得很好:
它使用jQuery和CSS

首先,我做了一个快速的CSS类,这可以embedded或在一个单独的文件。

 <style type='text/css'> .Clicked { /*No Attributes*/ } </style> 

接下来,在表单中的button的单击事件上,将CSS类添加到button。 如果button已经有CSS类,请将其删除。 (我们不需要两个CSS类[以防万一])。

  // Adds a CSS Class to the Button That Has Been Clicked. $("form :input[type='submit']").click(function () { if ($(this).hasClass("Clicked")) { $(this).removeClass("Clicked"); } $(this).addClass("Clicked"); }); 

现在,testingbutton,看看它有CSS类,如果testing的button没有CSS,那么另一个button会。

  // On Form Submit $("form").submit(function () { // Test Which Button Has the Class if ($("input[name='name1']").hasClass("Clicked")) { // Button 'name1' has been clicked. } else { // Button 'name2' has been clicked. } }); 

希望这可以帮助! 干杯!

您可以创buildinputtypes=“隐藏”作为buttonID信息的持有者。

 <input type="hidden" name="button" id="button"> <input type="submit" onClick="document.form_name.button.value = 1;" value="Do something" name="do_something"> 

在这种情况下,表单在提交时传递值“1”(您的button的ID)。 如果onClick发生在提交(?)之前,这是有效的,我不知道它是否始终为真。

区分哪个<button>或<input type =“button”…>的简单方法是检查它们的“id”:

 $("button").click(function() { var id = $(this).attr('id'); ... }); 

下面是一个示例,它使用this.form获取提交的正确表单,以及用于存储最后一次点击/聚焦的元素的数据字段。 我还在提交代码的过程中,确保点击事件发生之前执行(有些用户报告在Chrome浏览器有时点击事件被提交后发射)。

使用键和鼠标/手指进行导航时,无需依赖浏览器在RETURN键上发送点击事件(不会伤害),我添加了button和字段的焦点事件的事件处理程序。

您可以将types=“submit”的button添加到点击时自行保存的项目中。

在演示中,我设置了一个红色边框来显示所选项目以及显示名称和值/标签的警报。

这是FIDDLE

这是(相同的)代码:

使用Javascript:

 $("form").submit(function(e) { e.preventDefault(); // Use this for rare/buggy cases when click event is sent after submit setTimeout(function() { var $this=$(this); var lastFocus = $this.data("lastFocus"); var $defaultSubmit=null; if(lastFocus) $defaultSubmit=$(lastFocus); if(!$defaultSubmit || !$defaultSubmit.is("input[type=submit]")) { // If for some reason we don't have a submit, find one (the first) $defaultSubmit=$(this).find("input[type=submit]").first(); } if($defaultSubmit) { var submitName=$defaultSubmit.attr("name"); var submitLabel=$defaultSubmit.val(); // Just a demo, set hilite and alert doSomethingWith($defaultSubmit); setTimeout(function() {alert("Submitted "+submitName+": '"+submitLabel+"'")},1000); } else { // There were no submit in the form } }.bind(this),0); }); $("form input").focus(function() { $(this.form).data("lastFocus", this); }); $("form input").click(function() { $(this.form).data("lastFocus", this); }); // Just a demo, setting hilite function doSomethingWith($aSelectedEl) { $aSelectedEl.css({"border":"4px solid red"}); setTimeout(function() { $aSelectedEl.removeAttr("style"); },1000); } 

虚拟HTML:

 <form> <input type="text" name="testtextortexttest" value="Whatever you write, sir."/> <input type="text" name="moretesttextormoretexttest" value="Whatever you write, again, sir."/> <input type="submit" name="test1" value="Action 1"/> <input type="submit" name="test2" value="Action 2"/> <input type="submit" name="test3" value="Action 3"/> <input type="submit" name="test4" value="Action 4"/> <input type="submit" name="test5" value="Action 5"/> </form> 

DUMB CSS:

 input {display:block} 

你想像这样使用window.event.srcElement.id

 function clickTheButton() { var Sender = window.event.srcElement; alert("the item clicked was " + Sender.id) } 

对于一个button,如下所示:

 <input type="button" id="myButton" onclick="clickTheButton();" value="Click Me"/> 

你会得到一个警告:“点击的项目是myButton。

在改进的示例中,您可以将window.event.srcElement添加到process_form_submission,并且您将引用调用该进程的任何元素。