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，并且您将引用调用该进程的任何元素。
