jQuery:如何获取表单提交时点击了哪个按钮?
Posted
技术标签:
【中文标题】jQuery:如何获取表单提交时点击了哪个按钮?【英文标题】:jQuery: how to get which button was clicked upon form submission? 【发布时间】:2011-08-08 23:13:20 【问题描述】:我为表单提交设置了.submit()
事件。我在页面上也有多个表单,但在此示例中只有一个。我想知道点击了哪个提交按钮,而没有对每个按钮应用.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>
Live example on jsfiddle
除了在每个按钮上应用 .click() 事件外,有没有办法确定点击了哪个提交按钮?
【问题讨论】:
具有讽刺意味的是,这些信息对于确定服务器端来说当然是微不足道的。 @Neil 如果您通过 $.ajax() 和表单上的 serializeArray() 提交表单,则不会。 How can I get the button that caused the submit from the form submit event?的可能重复 如何在提交按钮上放置一个监听器并手动提交表单。 如何查看表单数据的序列化版本并匹配按钮的name
?
【参考方案1】:
这对我来说可以获取活动按钮
var val = document.activeElement.textContent;
【讨论】:
【参考方案2】:哇...很高兴在这里看到太多解决方案。但是 SubmitEvent 接口上有一个原生 Javascript 属性 submitter。 https://developer.mozilla.org/en-US/docs/Web/API/SubmitEvent/submitter
原生 Javascript
var btnClicked = event.submitter;
jQuery 版本
var btnClicked = event.originalEvent.submitter;
【讨论】:
【参考方案3】:试试这个:
$(document).ready(function()
$('form[name="testform"]').submit( function(event)
// This is the ID of the clicked button
var clicked_button_id = event.originalEvent.submitter.id;
);
);
【讨论】:
这与一年前的另一个答案完全相同。它仅在为按钮分配 id 时才有效,但是,由于event.originalEvent.submitter
是按钮,因此可以从中读取其他唯一分配的属性。【参考方案4】:
您可以在提交表单时简单地获取事件对象。从中获取提交者对象。如下:
$(".review-form").submit(function (e)
e.preventDefault(); // avoid to execute the actual submit of the form.
let submitter_btn = $(e.originalEvent.submitter);
console.log(submitter_btn.attr("name"));
如果您想将此表单发送到后端,您可以通过 new FormData() 创建一个新的表单元素并设置按下按钮的键值对,然后在后端访问它。像这样 -
$(".review-form").submit(function (e)
e.preventDefault(); // avoid to execute the actual submit of the form.
let form = $(this);
let newForm = new FormData($(form)[0]);
let submitter_btn = $(e.originalEvent.submitter);
console.log(submitter_btn.attr("name"));
if (submitter_btn.attr("name") == "approve_btn")
newForm.set("action_for", submitter_btn.attr("name"));
else if (submitter_btn.attr("name") == "reject_btn")
newForm.set("action_for", submitter_btn.attr("name"));
else
console.log("there is some error!");
return;
我基本上是在尝试创建一个表单,用户可以在其中批准或不批准/拒绝产品以用于任务中的进一步处理。 我的 HTML 表单是这样的 -
<form method="POST" action="% url 'tasks:review-task' taskid=product.task_id.id %"
class="review-form">
% csrf_token %
<input type="hidden" name="product_id" value="product.product_id" />
<input type="hidden" name="task_id" value="product.task_id_id" />
<button type="submit" name="approve_btn" class="btn btn-link" id="approve-btn">
<i class="fa fa-check" style="color: rgb(63, 245, 63);"></i>
</button>
<button type="submit" name="reject_btn" class="btn btn-link" id="reject-btn">
<i class="fa fa-times" style="color: red;"></i>
</button>
</form>
如果您有任何疑问,请告诉我。
【讨论】:
【参考方案5】:我能够通过 ASP.Net Core Web 应用在 Chrome 上使用 jQuery originalEvent.submitter
:
我的 .cshtml 表单:
<div class="form-group" id="buttons_grp">
<button type="submit" name="submitButton" value="Approve" class="btn btn-success">Approve</button>
<button type="submit" name="submitButton" value="Reject" class="btn btn-danger">Reject</button>
<button type="submit" name="submitButton" value="Save" class="btn btn-primary">Save</button>
...
jQuery 提交处理程序:
@section Scripts
@await Html.RenderPartialAsync("_ValidationScriptsPartial");
<script type="text/javascript">
$(document).ready(function()
...
// Ensure that we log an explanatory comment if "Reject"
$('#update_task_form').on('submit', function (e)
let text = e.originalEvent.submitter.textContent;
if (text == "Reject")
// Do stuff...
);
...
与我的 ASP.Net Core 环境捆绑在一起的 jQuery Microsoft 是 v3.3.1。
【讨论】:
【参考方案6】:表单提交时:
document.activeElement
将为您提供被点击的提交按钮。
document.activeElement.getAttribute('value')
将为您提供该按钮的值。
请注意,如果通过按 Enter 键提交表单,则document.activeElement
将是当时关注的表单input
。如果这不是提交按钮,那么在这种情况下,可能是没有“被点击的按钮”。
【讨论】:
请注意,这在 Safari 上似乎无法正常工作。 :( 我不知道 Safari 怎么样,但在 Chrome 上运行良好 :) 谢谢! 适用于 Chrome 63 和 IE11 我运行了 jquery 非侵入式验证,并在此之前拦截并将无效输入设置为 activeElement 而不是按钮。 好点@Daan:如果您通过按 Enter 提交表单,则可能不会成为“被点击的按钮”。document.activeElement
仍然有效:在这种情况下,它为您提供提交表单的输入而不是按钮。我已经更新了答案以明确这一点。谢谢。【参考方案7】:
这是我的解决方案:
$('#form').submit(function(e)
console.log($('#'+e.originalEvent.submitter.id));
e.preventDefault();
);
【讨论】:
只有在为按钮分配了 id 时才会起作用,但是,由于event.originalEvent.submitter
是按钮,因此可以从中读取其他唯一分配的属性。【参考方案8】:
对于我的目的来说,这是一种看起来更简洁的方法。
首先,对于任何和所有形式:
$('form').click(function(event)
$(this).data('clicked',$(event.target))
);
当这个点击事件被一个表单触发时,它只是简单地记录了原始目标(在事件对象中可用)以供以后访问。这是一个相当广泛的笔触,因为它会在表单上的任何位置单击。欢迎优化 cmets,但我怀疑它永远不会引起明显的问题。
然后,在$('form').submit()
中,您可以查询上次点击的内容,例如
if ($(this).data('clicked').is('[name=no_ajax]')) xhr.abort();
【讨论】:
如果这是一个表单提交事件而不是点击怎么办? @Tony,对不起,我没有早点看到你的问题。这个答案完全是关于表单提交的。提交按钮也会被点击,因此它们会触发点击事件。 赞成这个答案而不是hunter's answer,因为表单的提交事件在任何子元素点击事件之前被触发。当您的表单的提交事件被return false
取消时,这会导致困难,而此方法可以正常工作,因为单击绑定到表单而不是其子项。
这无法正确处理通过单击以外的方式提交表单的情况(例如,按 Enter)。当通过其他方式提交表单时,触发提交事件的是第一个提交按钮,而不是最后一次点击的按钮。
... $(event.target))
后面缺少分号,但无法编辑,因为编辑必须> 6 个字符【参考方案9】:
$('form').submit(function (ev)
let clickedButton = ev.originalEvent.explicitOriginalTarget;
);
【讨论】:
【参考方案10】:我写了这个对我有帮助的函数
var PupulateFormData= function (elem)
var arr = ;
$(elem).find("input[name],select[name],button[name]:focus,input[type='submit']:focus").each(function ()
arr[$(this).attr("name")] = $(this).val();
);
return arr;
;
然后使用
var data= PupulateFormData($("form"));
【讨论】:
【参考方案11】:这是一个示例,它使用 this.form 获取提交的正确表单,并使用数据字段存储最后点击/聚焦的元素。我还将提交代码包装在超时内,以确保在执行之前发生点击事件(一些用户在 cmets 中报告说,在 Chrome 上有时会在提交后触发点击事件)。
在使用键和鼠标/手指导航时都可以工作,而无需依靠浏览器在 RETURN 键上发送点击事件(虽然没有坏处),我为按钮和字段的焦点事件添加了一个事件处理程序。
您可以将 type="submit" 类型的按钮添加到单击时会自行保存的项目。
在演示中,我设置了一个红色边框来显示所选项目和一个显示名称和值/标签的警报。
这里是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>
愚蠢的 CSS:
input display:block
【讨论】:
【参考方案12】:区分哪个
$("button").click(function()
var id = $(this).attr('id');
...
);
【讨论】:
【参考方案13】:您可以创建 input type="hidden" 作为按钮 id 信息的持有者。
<input type="hidden" name="button" id="button">
<input type="submit" onClick="document.form_name.button.value = 1;" value="Do something" name="do_something">
在这种情况下,表单在提交时传递值“1”(按钮的 ID)。如果 onClick 发生在提交(?)之前,这有效,我不确定它是否总是正确的。
【讨论】:
【参考方案14】:我发现最好的解决方案是
$(document.activeElement).attr('id')
这不仅适用于输入,也适用于按钮标签。 它还获取按钮的 id。
【讨论】:
该死的,我必须看看我的页面现在是否可以在 Safari 上运行。为什么 Safari 总是这么难。感谢那。回家后去看看 developer.mozilla.org/en-US/docs/Web/API/DocumentOrShadowRoot/… 这在 Safari 中对我不起作用。单击正文中按钮上的侦听器调用表单上的 .submit。在提交处理程序内部$(document.activeElement).attr('id')
返回undefined
这不适用于键盘提交。例如。如果您专注于输入并按 Enter 提交表单。【参考方案15】:
使用this excellent answer,您可以检查活动元素(按钮),将隐藏的输入附加到表单,并可选择在提交处理程序的末尾将其删除。
$('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
类。
【讨论】:
【参考方案16】:我也问过同样的问题:How can I get the button that caused the submit from the form submit event?
我最终想出了这个解决方案,而且效果很好:
$(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");
);
);
如果您有多个表单,您可能需要稍微调整一下,但它仍然应该适用
【讨论】:
+1 不错的解决方案。您可能需要添加一条语句,将按钮的 clicked 属性重置为 false,以防表单提交以 ajax 方式处理,并且您希望避免再次获得预先单击的按钮。 哦,我明白了。您正在添加自己的“点击”属性。我一直在寻找一个“点击”的布尔值,但在任何地方都找不到。我从来没想过自己做一个。好主意! 请注意,这只适用于输入元素,不适用于按钮元素。 这在带有按钮元素的 Chrome 中是不必要的。我只是处理 on submit 事件,从表单构造一个 FormData 对象,它总是包含被点击的按钮的值。 FireFox 没有表现出这种行为,而是根本不发送按钮值。 Chrome 似乎在自动执行类似上述解决方案的操作,记住单击了哪个按钮并将其自动包含在表单数据中。当然,这种缺乏标准行为(无论如何都会困扰 JavaScript 中的所有内容,所以我并不感到惊讶),使得该功能毫无用处。 另外,考虑添加选择器“button[type=submit]”(用逗号分隔),因为提交元素不必是输入标签。【参考方案17】:由于我无法对已接受的答案发表评论,因此我在这里带来了一个修改版本,该版本应考虑到表单之外的元素(即:使用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]');
)
【讨论】:
这确实应该是选择的答案。我只想补充一点,规则应该是"button,[type=submit]"
@Wil 但并非所有按钮都是提交按钮,这取决于它们的类型。
是的,但是在没有 ] 的情况下,我曾经使用过的每个 UA 都将 【参考方案18】:
这对我有用:
$("form").submit(function()
// Print the value of the button that was clicked
console.log($(document.activeElement).val());
【讨论】:
这很有帮助,为了得到activeElement
的id
,我做了$(document.activeElement).attr('id');
对于它的价值,你不需要使用 jQuery 来获取 id - 使用纯 Javascript 更简单:document.activeElement.id
请注意,这在 Safari 上似乎无法正常工作。 :(
@rinogo:Safari 会发生什么?
在 Safari 中 document.activeElement
不是输入。在我的例子中,它是一个模态 div(包含表单)。【参考方案19】:
这是我使用的解决方案,效果很好:
// 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>
【讨论】:
【参考方案20】:对我来说,最好的解决方案是:
$(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'))
);
【讨论】:
【参考方案21】:我也做了一个解决方案,效果很好: 它使用 jQuery 和 CSS
首先,我制作了一个快速的 CSS 类,它可以嵌入到单独的文件中。
<style type='text/css'>
.Clicked
/*No Attributes*/
</style>
接下来,在表单内按钮的单击事件中,将 CSS 类添加到按钮。如果按钮已经具有 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");
);
现在,测试按钮是否有 CSS 类,如果测试的按钮没有 CSS,那么另一个按钮会有。
// 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.
);
希望这会有所帮助! 干杯!
【讨论】:
记得包含button[type=submit]
和input[type=image]
。
您应该删除对样式和 CSS 的引用 - 它们与此处无关。此外,您使用hasClass()
和removeClass()
的行是多余的,因为addClass()
不会将同一个类添加两次。【参考方案22】:
这个对我有用
$('#Form').submit(function()
var btn= $(this).find("input[type=submit]:focus").val();
alert('you have clicked '+ btn);
【讨论】:
这值得奖牌! 这与@Stan 提供的答案有何不同?【参考方案23】:它帮助了我https://***.com/a/17805011/1029257
只有在点击提交按钮后才提交表单。
var theBtn = $(':focus');
if(theBtn.is(':submit'))
// ....
return true;
return false;
【讨论】:
【参考方案24】:我发现这行得通。
$(document).ready(function()
$( "form" ).submit(function ()
// Get the submit button element
var btn = $(this).find("input[type=submit]:focus" );
);
【讨论】:
这个解决方案在 Chrome 上运行良好,但不能在 Safari 上运行,它会返回 undefined,而不是按钮对象 @Krinkle 我这样编码是为了展示最通用的方式。我认为开发人员足够聪明,可以根据自己的喜好对其进行优化。 比其他解决方案更干净。仍然没有找到在按下回车时有效的解决方案 这个答案并不总是有效。实际上,您需要单击的按钮,而不是焦点(因为焦点操作不是单击操作)。选择的答案(猎人的)是正确的。 我在提交按钮上有一个点击事件并在他们的表单上提交事件......后者触发了前者。我用它来找出事件的来源。在某些浏览器中单击按钮,您将获得焦点,而在其他浏览器中,您将一无所获。在我测试的所有浏览器中,在输入时按回车键会使输入保持焦点。【参考方案25】:以 Stan 和 yann-h 所做的为基础,但这个默认为第一个按钮。这种整体方法的美妙之处在于它同时获取了单击和回车键(即使焦点不在按钮上。如果您需要允许在表单中输入,那么只需在按钮获得焦点时响应(即 Stan 的回答)。就我而言,即使用户当前的焦点在文本框上,我也希望允许 enter 提交表单。
我也使用了“name”属性而不是“id”,但这是相同的方法。
var pressedButtonName =
typeof $(":input[type=submit]:focus")[0] === "undefined" ?
$(":input[type=submit]:first")[0].name :
$(":input[type=submit]:focus")[0].name;
【讨论】:
因此,如果您使用 TAB 将焦点移至第二个按钮并按 RETURN,它将默认为第一个按钮...【参考方案26】:类似于 Stan 的回答,但是:
如果您有多个按钮,则只需获取 第一个按钮 => [0] 如果可以使用回车键提交表单,则必须管理一个默认值 => myDefaultButtonId$(document).on('submit', function(event)
event.preventDefault();
var pressedButtonId =
typeof $(":input[type=submit]:focus")[0] === "undefined" ?
"myDefaultButtonId" :
$(":input[type=submit]:focus")[0].id;
...
【讨论】:
【参考方案27】:哇,有些解决方案可能会变得复杂!如果您不介意使用简单的全局,只需利用输入按钮单击事件首先触发的事实。可以使用 $('#myForm input') 进一步过滤 $('input') 选择器以获取多种表单之一。
$(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);
);
);
【讨论】:
【参考方案28】:$("form input[type=submit]").click(function()
$("<input />")
.attr('type', 'hidden')
.attr('name', $(this).attr('name'))
.attr('value', $(this).attr('value'))
.appendTo(this)
);
添加隐藏字段
【讨论】:
在 Firefox 30 / Windows 7 中不起作用。注意:现在在 Firefox 中需要一个隐藏字段,因为如果与 jquery 一起发送,它可能不会发送单击的提交值:this.submit() in an提交事件。我只是有点担心 $(this).attr('name') 可能不适用于所有浏览器。 我有 Firefox 30 / Windows 7。我的一切都运行良好。 记得包含button[type=submit]
和input[type=image]
。【参考方案29】:
另一种可能的解决方案是在表单中添加一个隐藏字段:
<input type="hidden" id="btaction"/>
然后在准备好的函数中添加函数来记录按下了什么键:
$('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);
);
现在在表单提交处理程序中读取隐藏变量并根据它做出决定:
var act = $('form#myForm #btaction').val();
【讨论】:
【参考方案30】:如果您不添加 .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 );
【讨论】:
不错的主意。这适用于页面上的任意数量的表单吗? @hawk 是的,应该。我不知道这是否是所需的行为,但您的代码实际上并没有提交表单,所以我的也没有。如果您确实想提交它,只需删除event.preventDefault
或执行input.parents("form")[0].submit()
之类的操作。
如果你没有点击就提交(回车键?)那将是一团糟..以上是关于jQuery:如何获取表单提交时点击了哪个按钮?的主要内容,如果未能解决你的问题,请参考以下文章
jQuery ajax 提交表单并从 datepicker、按钮获取值
如何将 Jquery 表单提交功能更改为 AngularJS 功能?
form元素的()属性指出“提交”按钮被点击后跳转到哪个网页