jQuery:如何获得哪个按钮被点击提交的表单?

我问了同样的问题:如何从表单提交事件中获得导致提交的按钮?

我最终想出了这个解决方案，而且效果很好:

$(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");
});
});

在你有多个表单的情况下，你可能需要稍微调整一下，但它仍然适用

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

function clickTheButton() {


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


}

对于如下所示的按钮:

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

你会得到一个警告，上面写着:“点击的项目是我的按钮。

在改进的示例中，您可以将window.event.srcElement添加到process_form_submission中，这样就可以引用调用该流程的元素。

如果你不添加.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').click(function(event) {
$(this).data('clicked',$(event.target))
});

当为表单触发此单击事件时，它只是记录稍后要访问的原始目标(在事件对象中可用)。这是一个相当宽泛的描边，因为它将在表单上的任何地方触发任何单击。欢迎提供优化评论，但我怀疑它永远不会引起明显的问题。

然后，在$('form').submit()中，你可以用类似于

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

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

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

然后在ready函数中添加函数来记录按下的键:

$('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();

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

添加隐藏字段

我发现这很有效。

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

哇，有些解决方案可能会变得复杂!如果您不介意使用一个简单的全局变量，只需利用输入按钮单击事件首先触发的事实。可以通过使用$('#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);
});
});

类似于Stan的回答，但是:

• 如果你有多个按钮，你必须只获得 第一个按钮=> [0]
• 如果表单可以用enter键提交，你必须管理一个default => myDefaultButtonId

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

基于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;

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

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

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


return false;

这个方法对我很管用

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


}

我也做了一个解决方案，它工作得很好:
它使用jQuery和CSS

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

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

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

对我来说，最好的解决方案是:

$(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'))


});

这是我使用的解决方案，效果非常好:

// 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>

这对我来说很管用:

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

由于我不能对已接受的答案进行评论，我在这里带来了一个修改后的版本，该版本应该考虑到表单之外的元素(即:使用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]');
})

提交表格时:

• document.activeElement将给你被点击的提交按钮。

• document.activeElement.getAttribute('value')将给出该按钮的值。

注意，如果表单是通过按输入键提交的，那么document.activeElement将是当时聚焦的input表单。如果这不是一个提交按钮，那么在这种情况下，可能没有被点击的“;按钮”。

使用这个回答很好，您可以检查活动元素(按钮)，将隐藏输入附加到表单，并可选地在提交处理程序的末尾删除它。

$('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类。

我发现最好的解决办法是

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

你可以创建input type="hidden"作为按钮id信息的holder。

<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发生在提交(?)之前，这是有效的，我不确定它是否总是正确的。

一个简单的方法来区分哪个<按钮>或者<input type="button"…是通过检查他们的'id'

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

这是一个使用这个的例子。表单以获取提交的正确表单，数据字段用于存储最后单击/聚焦的元素。我还将提交代码包装在一个超时内，以确保在执行之前发生单击事件(一些用户在评论中报告，在Chrome上，有时在提交之后会触发单击事件)。

当使用键和鼠标/手指导航时，不指望浏览器在RETURN键上发送单击事件(虽然没有伤害)，我为按钮和字段的焦点事件添加了一个事件处理程序。

您可以在项目中添加type="submit"按钮，当单击时保存它们自己。

在演示中，我设置了一个红色边框来显示所选项目，并设置了一个警告，显示名称和值/标签。

这里是提琴 .

下面是(相同的)代码:

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}

我写这个函数来帮助我

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

$('form').submit(function (ev) {
let clickedButton = ev.originalEvent.explicitOriginalTarget;
});

以下是我的解决方案:

   $('#form').submit(function(e){
console.log($('#'+e.originalEvent.submitter.id));
e.preventDefault();
});

我能够使用jQuery originalEvent.submitter在Chrome与ASP。Net Core web应用程序:

我的.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...
}
});
...

jQuery微软捆绑了我的ASP。Net Core环境是v3.3.1。

您可以在提交表单时获得事件对象。从中获取submitter对象。如下:

$(".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>

如果你有任何疑问请告诉我。

试试这个:

$(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;
        

});
});

哇……很高兴看到这么多解。但是在SubmitEvent接口上有一个原生的Javascript属性提交者。https://developer.mozilla.org/en-US/docs/Web/API/SubmitEvent/submitter

原生Javascript

var btnClicked = event.submitter;

JQuery版本

var btnClicked = event.originalEvent.submitter;

这为我工作，以获得活动按钮

            var val = document.activeElement.textContent;

假设我有这些“提交”;按钮:

<button type="submit" name="submitButton" id="update" value="UpdateRecord" class="btn btn-primary">Update Record</button>
<button type="submit" name="submitButton" id="review_info" value="ReviewInfo" class="btn btn-warning sme_only">Review Info</button>
<button type="submit" name="submitButton" id="need_more_info" value="NeedMoreInfo" class="btn btn-warning sme_only">Need More Info</button>

而这个“提交”;事件处理程序:

 $('#my_form').on('submit', function (e) {
let x1 = $(this).find("input[type=submit]:focus");
let x2 = e.originalEvent.submitter.textContent;

两种表达都可以。如果我点击第一个按钮，“x1"和“;x2"Update Record返回。