小开

JQuery 似乎没有提供关于提交事件的数据。看来你提出的方法是最好的选择。

小开

我创建了一个测试表单，并使用 Firebug 找到了这种方法来获取值;

$('form').submit(function(event){
alert(event.originalEvent.explicitOriginalTarget.value);
});

不幸的是，只有 Firefox 支持这个事件。

小开

根据这个链接，Event 对象包含一个字段 Event.target，其中:

Returns a string representing the object that initiated the event.

我刚刚创建了一个页面来测试这个值是什么，看起来这个表示似乎是针对表单本身的，而不是单击的按钮。换句话说，Javascript 不提供确定单击按钮的功能。

至于 DaveAnderson 的 solution，在使用之前在多个浏览器中测试它可能是一个好主意。有可能会成功，但我不能说两者皆有可能。

小开

最佳答案

我实现了这一点，我想它会起作用的。

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

谢谢你的回复，不过这也不算太失礼。

小开

您可以尝试这种方法，比如使用“ event.OrigalEvent.x”和“ event.OrigalEvent.y”:

<!DOCTYPE html>
<html>
<head>
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.3.2/jquery.min.js"></script>
<title>test</title>
</head>
<body>


<form id="is_a_form">
<input id="is_a_input_1" type="submit"><br />
<input id="is_a_input_2" type="submit"><br />
<input id="is_a_input_3" type="submit"><br />
<input id="is_a_input_4" type="submit"><br />
<input id="is_a_input_5" type="submit"><br />
</form>


</body>
</html>
<script>
$(function(){


$.fn.extend({
inPosition: function(x, y) {


return this.each(function() {


try{
var offset = $(this).offset();


if ( (x >= offset.left) &&
(x <= (offset.left+$(this).width())) &&
(y >= offset.top) &&
(y <= (offset.top+$(this).height())) )
{
$(this).css("background-color", "red");
}
else
{
$(this).css("background-color", "#d4d0c8");
}
}
catch(ex)
{
}


});
}
});


$("form").submit(function(ev) {


$("input[type='submit']").inPosition(ev.originalEvent.x ,ev.originalEvent.y);
return false;


});


});
</script>

小开

对我来说，这个方法看起来更干净。

首先，对于任何形式:

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

当为窗体触发此单击事件时，它只是记录以后要访问的原始目标(在事件对象中可用)。这是一个相当宽泛的行程，因为它将触发任何点击窗体上的任何地方。优化注释是受欢迎的，但我怀疑它永远不会引起明显的问题。

然后，在 $(‘ form’) . mit ()中，您可以查询最后一次单击的内容，如下所示

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

小开

我搜索并找到了几种使用 jQuery + AJAX 将提交按钮 name + value发送到服务器的方法。我不是很喜欢他们。

其中最好的是猎人的解决方案在这里提出！

But I wrote another one myself.

我想要分享，因为它很好，而且，如果我需要的话，它还可以用于通过 ajax 加载的表单(在 document.ready 之后) :

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

Simple! When the submit button is clicked, a hidden field is added to the form, using same name and value of the submit button.

编辑: 下面的版本更容易阅读。此外，它还负责删除先前附加的隐藏字段(在提交同一表单两次的情况下，这在使用 AJAX 时是完全可能的)。

改进的代码:

$(document).on('click', 'form input[type=submit]', function(){
var name   = $(this).attr('name');
if (typeof name == 'undefined') return;
var value  = $(this).attr('value');
var $form  = $(this).parents('form').first();
var $input = $('<input type="hidden" class="temp-hidden" />').attr('name', name).attr('value', value);
$form.find('input.temp-hidden').remove();
$form.append($input);
});

小开

一种干净的方法是在每个窗体按钮上使用 click 事件。 Following is a html form with save,cancel and delete buttons:

<form  name="formname" action="/location/form_action" method="POST">
<input name="note_id" value="some value"/>
<input class="savenote" type="submit" value="Save"/>
<input class="cancelnote" type="submit" value="Cancel"/>
<input class="deletenote" type="submit" value="Delete" />
</form>

Following is the jquery. I send the appropriate 'action' to the same server function depending on which button was clicked ('save' or 'delete'). If 'cancel', is clicked, I just reload the page.

$('.savenote').click(function(){
var options = {
data: {'action':'save'}
};
$(this).parent().ajaxSubmit(options);
});




$('.deletenote').click(function(){
var options = {
data: {'action':'delete'}
};
$(this).parent().ajaxSubmit(options);
});




$('.cancelnote').click(function(){
window.location.reload(true);
return false;
});

小开

我利用了 document.activeElement，正如这个答案所示: 如何使用 jQuery 获得聚焦元素？

$form.on('submit', function() {
var $btn = $(document.activeElement);


if (
/* there is an activeElement at all */
$btn.length &&


/* it's a child of the form */
$form.has($btn) &&


/* it's really a submit element */
$btn.is('button[type="submit"], input[type="submit"], input[type="image"]') &&


/* it has a "name" attribute */
$btn.is('[name]')
) {
console.log("Seems, that this element was clicked:", $btn);
/* access $btn.attr("name") and $btn.val() for data */
}
});

我利用了这样一个事实: 点击按钮后，它总是被聚焦的元素。这将没有的工作，如果你做一个 blur()右后点击。

@ Doin 发现了另一个缺点。如果用户通过 enter在文本字段中提交表单，则不设置 document.activeElement。通过在 input[type="text"]中处理 keypress事件和类似的事件，您需要自己注意这一点。

更新2017-01: 对于我的库超级表演，我选择不使用 activeElement，而是捕捉所有事件，这将导致表单提交。这个的密码在 Github 上。

如果你碰巧使用 HyPerformance，你可以这样访问触发提交的按钮:

$(form).on('submit', function(event) {
var button = event.submittedVia;
});

小开

我尝试了所提供的一些示例，但它们不适合我们的目的。

这里有一个小提琴展示: http://jsfiddle.net/7a8qhofo/1/

我曾面临过类似的问题，这就是我们如何以我们的形式解决这个问题。

$(document).ready(function(){


// Set a variable, we will fill later.
var value = null;


// On submit click, set the value
$('input[type="submit"]').click(function(){
value = $(this).val();
});


// On data-type submit click, set the value
$('input[type="submit"][data-type]').click(function(){
value = $(this).data('type');
});


// Use the set value in the submit function
$('form').submit(function (event){
event.preventDefault();
alert(value);
// do whatever you need to with the content
});
});

小开

只是另一个解决方案，因为没有其他符合我的要求。优点是，点击和按键(输入和空格)被检测到。

// Detects the Events
var $form = $('form');
$form.on('click keypress', 'button[type="submit"]', function (ev) {


// Get the key (enter, space or mouse) which was pressed.
if (ev.which === 13 || ev.which === 32 || ev.type === 'click') {


// Get the clicked button
var caller = ev.currentTarget;


// Input Validation
if (!($form.valid())) {
return;
}


// Do whatever you want, e.g. ajax...
ev.preventDefault();
$.ajax({
// ...
})
}
}

这对我来说效果最好。

小开

(活动)

function submForm(form,event){
var submitButton;


if(typeof event.explicitOriginalTarget != 'undefined'){  //
submitButton = event.explicitOriginalTarget;
}else if(typeof document.activeElement.value != 'undefined'){  // IE
submitButton = document.activeElement;
};


alert(submitButton.name+' = '+submitButton.value)
}




<form action="" method="post" onSubmit="submForm(this, event); return false;">

小开

With a more specific event handler and JQuery, your event object is the button clicked. You can also get the delegating form from this event if needed.

$('form').on('click', 'button', function (e) {
e.preventDefault();
var
$button = $(e.target),
$form = $(e.delegateTarget);
var buttonValue = $button.val();
});

This Doc has everything you need to get started. JQuery 文档。

小开

我写了这个函数来帮助我

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

小开

现在在提交事件中有一个标准的 submitter属性。
已经在 Firefox 75和 Chrome/Edge 81 中实现！

document.addEventListener('submit',function(e){
console.log(e.submitter)
})

对于不支持它的浏览器，请使用此填料
注意: 如果你的目标是较老的浏览器，你需要填充其他东西，如 closest或 matches。并确保在添加提交事件之前加载了 polyfill。

!function(){
var lastBtn = null
document.addEventListener('click',function(e){
if (!e.target.closest) return;
lastBtn = e.target.closest('button, input[type=submit]');
}, true);
document.addEventListener('submit',function(e){
if ('submitter' in e) return;
var canditates = [document.activeElement, lastBtn];
lastBtn = null;
for (var i=0; i < canditates.length; i++) {
var candidate = canditates[i];
if (!candidate) continue;
if (!candidate.form) continue;
if (!candidate.matches('button, input[type=button], input[type=image]')) continue;
e.submitter = candidate;
return;
}
e.submitter = e.target.querySelector('button, input[type=button], input[type=image]')
}, true);
}();

小开

表单的提交事件有一个提交者属性。但是，到目前为止，这个属性在 Safari 上不起作用。

<form id="form">
<button value="add" type="submit">Add</button>
<button value="remove" type="submit">Remove</button>
</form>

let form = document.getElementById('form');


form.onsubmit = (event) => {
e.preventDefault();
console.log(e.submitter.type);
}

一种跨浏览器的不同方法。但是，必须依赖于 form元素而不是 event对象。这基本上是在表单元素对象上添加一个“ submitter”属性，可以在稍后的表单提交时引用。

<form id="form">
<button onclick="this.form.submitter = 'add'" type="submit">Add</button>
<button onclick="this.form.submitter = 'remove'" type="submit">Remove</button>
</form>

let form = document.getElementById('form');


form.onsubmit = (event) => {
e.preventDefault();
console.log(form.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"));
}

I have explained in detail in this answer here: (https://stackoverflow.com/a/66334184/11320178)
如果你有任何疑问，请告诉我。

小开

在处理那些表单元素位于 ShadowRoot 中的 web 组件时，我改编了 Tobias Buschor 的优秀填充函数，通过一个导入的模块按照以下方式工作。注意，这只提供常青客户端的兼容性—— edge、 safari、 chrome、 firefox。另外，正如 Mikko Rantalainen 所指出的，这并不遵循(我/我们可以在某个时候更新) https://html.spec.whatwg.org/multipage/form-control-infrastructure.html#concept-form-submit

if( !('SubmitEvent' in self && 'submitter' in SubmitEvent.prototype) ){
// polyfill SubmitEvent.submitter (a Safari issue as-of 2021)
// https://developer.mozilla.org/docs/Web/API/SubmitEvent
const submitter = Symbol.for('submitter');
Event[ submitter ] = null;
const submitterSelector = 'input[type=submit], input[type=image], input[type=button], button';


Object.defineProperty(Event.prototype, 'submitter', {
get: function(){
if('submit' === this.type){
let node = Event[ submitter ];
const form = this.target;
if(!node || !form.contains(node)){
node = form.querySelector(submitterSelector);
}
// always return a node, default as though form.submit called
return node || form;
}
return undefined;
},
set: function(value){
if('submit' === this.type){
this.submitter = value;
}
}
});
self.addEventListener('click', function polyfill_SubmitEvent_submitter_click(event){
const node = event.composedPath()[0];
const closest = node.closest?.(submitterSelector) ?? null;
Event[ submitter ] = closest;
}, true);
}

小开

$(document).ready(function() {
$( "form" ).submit(function (event) {
// Get the submit button element
let submit_button =  event.handleObj;
//submit button has the object of the use clicked button
});
}

小开

You can obtain the button id of the following HTML code:

<form id="theForm" action="" method="POST">
<button name="sbtn" id="sbtn" value="Hey button" type="submit">Submit</button>
</form>

使用以下 JavaScript (利用. val ()属性) :

$('#theForm').on('click', 'button', function (e) {
e.preventDefault();
var
$button = $(e.target),
$form = $(e.delegateTarget);
var buttonValue = $button.val();
});

小开

没有 jquery

submit(e){
console.log(e.nativeEvent.submitter)
}

小开

我终于能够找到一个完整而简单的答案来回答这个问题: 我如何从表单提交事件中获得导致提交的按钮？

我给你举个简单的例子:

CODE HTML : The form

<form id="myForm" enctype="multipart/form-data" method="post">


...
all input, select, textarea ...
....


<button id="bt1" value="add" type="submit">Add</button>
<button id="bt2" value="back" type="submit">Back</button>
<button id="bt3" value="remove" type="submit">Remove</button>
<button id="bt4" value="register" type="submit">Register</button>
</form>

代码 JAVASCRIPT: 事件侦听器和操作

var myFctSubmit = function(event){
var myTarget = event.target || event.srcElement;
var myButton = event.originalEvent.submitter;


var balise_form = $(myTarget).attr('id');
var balise_button = $(myButton).attr('id');


//Now you know the button and
//you can apply the script you want...
//here in this exemple :
//balise_form = myForm
//balise_button = {button that you click}


}


$('#myForm').bind('submit',myFctSubmit);

因此，这个问题的解决方案是获取以下元素:

Event

祝大家好运

如何从表单提交事件中获取导致提交的按钮？

从事件对象中获取提交者对象

没有 jquery