我正在尝试找到触发表单提交的提交按钮的值
$("form").submit(function() {
});
我可能会触发一个$（“input [type = submit]”）。每个按钮的click（）事件并设置一些变量，但这似乎不如在提交表单中拉出按钮的一些优雅
答案 0 :(得分：100)
我在此答案中草拟了document.activeElement：How to get the focused element with 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。您需要自己注意，处理keypress中类似的input[type="text"]个事件。
更新2017-01：对于我的图书馆Hyperform，我选择不使用activeElement，而是捕捉所有导致表单提交的事件。 The code for this在Github上。
如果您碰巧使用Hyperform，则可以访问触发提交的按钮：
$(form).on('submit', function(event) {
var button = event.submittedVia;
});
答案 1 :(得分：34)
我实现了这个，我想它会这样做。
$(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");
});
感谢您的回复，但这并不是非常不优雅......
答案 2 :(得分：10)
提交事件中现在有一个标准的submitter属性。
Already implemented in Firefox 75 and Chrome/Edge 81！
document.addEventListener('submit',function(e){
console.log(e.submitter)
})
对于不支持它的浏览器，请使用此 polyfill
注意：如果您以较旧的浏览器为目标，则需要填充其他内容，例如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);
}();
答案 3 :(得分：9)
我创建了一个测试表单并使用Firebug以这种方式获取值;
$('form').submit(function(event){
alert(event.originalEvent.explicitOriginalTarget.value);
});
不幸的是，只有Firefox支持此事件。
答案 4 :(得分：6)
这是一种对我来说似乎更清洁的方法。
首先，对于任何和所有形式：
$('form').click(function(event) {
$(this).data('clicked',$(event.target))
});
当为表单触发此click事件时，它只记录稍后要访问的原始目标（在事件对象中可用）。这是一个相当广泛的笔划，因为它将触发表单上任何位置的任何单击。欢迎优化评论，但我怀疑它永远不会引起明显的问题。
然后，在$（'form'）。submit（）中，您可以查询最后点击的内容，例如
if ($(this).data('clicked').is('[name=no_ajax]')) xhr.abort();
答案 5 :(得分：4)
根据this link，Event对象包含一个字段Event.target，其中包含：
返回表示发起事件的对象的字符串。
我刚刚创建了一个测试该值是什么的页面，看起来好像表示是表单本身，而不是点击的按钮。换句话说，Javascript不提供确定点击按钮的工具。
就Dave Anderson的solution而言，在使用它之前在多个浏览器中测试它可能是一个好主意。有可能它可以正常工作，但我不能说任何一种方式。
答案 6 :(得分：4)
一种干净的方法是在每个表单按钮上使用click事件。 以下是带有保存，取消和删除按钮的html表单：
<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>
以下是jquery。我根据单击的按钮（“保存”或“删除”）将相应的“操作”发送到同一服务器功能。如果单击“取消”，我只需重新加载页面。
$('.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;
});
答案 7 :(得分：3)
我搜索并找到了几种方法来使用jQuery + AJAX将提交按钮name + value发送到服务器。我非常不喜欢他们......
其中一个最好的例子就是猎人的解决方案！
但我自己写了另一篇。
我想分享，因为它很好，并且，根据我的需要，它也适用于通过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'));
});
简单！点击提交按钮后，系统会使用提交按钮的name和value添加隐藏字段。
编辑：以下版本更易于阅读。此外，它还会删除以前附加的隐藏字段（在提交相同表单的情况下两次，这在使用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);
});
答案 8 :(得分：2)
我确实尝试了一些提供的示例，但它们并不适用于我们的目的。
这是一个小提示：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
});
});
答案 9 :(得分：2)
（事件）
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;">
答案 10 :(得分：1)
您可以使用“event.originalEvent.x”和“event.originalEvent.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>
答案 11 :(得分：1)
表单的submitter有一个SubmitEvent属性。但是，到目前为止，这在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);
}
答案 12 :(得分：0)
另一种解决方案，因为没有其他人符合我的要求。优点是，检测到点击和按键（输入和空格）。
// 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({
// ...
})
}
}
这对我来说效果最好。
答案 13 :(得分：0)
jQuery似乎没有提供有关submit事件的数据。看起来你建议的方法是最好的选择。
答案 14 :(得分：0)
使用更具体的事件处理程序和JQuery，您的事件对象是单击的按钮。如果需要，您还可以从此活动中获取委派表格。
$('form').on('click', 'button', function (e) {
e.preventDefault();
var
$button = $(e.target),
$form = $(e.delegateTarget);
var buttonValue = $button.val();
});
这个Doc拥有入门所需的一切。 JQuery Doc
答案 15 :(得分：0)
我写了这个对我有帮助的功能
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"));
答案 16 :(得分：0)
您可以在提交表单时简单地获取事件对象。从中获取提交者对象。如下：
$(".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"));
}
我已经在这里详细解释了：(https://stackoverflow.com/a/66334184/11320178)
如果您有任何疑问，请告诉我。
答案 17 :(得分：0)
在使用表单元素位于 shadowRoot 中的 web 组件时，我按照以下方式调整了 Tobias Buschor 的优秀 polyfill，以通过导入的模块按以下方式工作。请注意，这仅在常绿客户端中提供兼容性——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);
}