$("form").submit(function() {
});
我可以为每个按钮触发$("input[type=submit]").click()事件并设置一些变量,但这似乎不如在提交时从表单中某处获取按钮优雅。
我利用了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
未设置。您需要自己处理input[type="text"]
和类似元素上的keypress
事件,以避免出现此问题。
更新2017-01:对于我的库Hyperform,我选择不使用activeElement
,而是捕获所有导致表单提交的事件。代码在Github上。
如果您恰好使用Hyperform,则可以通过以下方式访问触发提交的按钮:
$(form).on('submit', function(event) {
var button = event.submittedVia;
});
buttonElement.click()
或 buttonElement.dispatch(new MouseEvent(...))
,不获取焦点);C. 通过表单隐式提交(与其他表单字段的键盘交互);D. 不提交到任何地方,当使用formElement.submit()
。 - mems我实现了这个,我想它会起作用。
$(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");
});
谢谢回复,但这并不是非常不优雅的...
现在,在提交事件中有一个标准的submitter
属性。
已经在Firefox 75和Chrome / Edge 81中实现!
document.addEventListener('submit',function(e){
console.log(e.submitter)
})
对于不支持它的浏览器,可以使用这个 polyfill 。
注意:如果你的目标浏览器是旧版本,则需要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);
}();
.submitter
值。 - Mikko Rantalainenform.submit()
,则可能会缺少 submitter。 - Mikko Rantalainen我创建了一个测试表单,使用Firebug发现了获取值的方法:
$('form').submit(function(event){
alert(event.originalEvent.explicitOriginalTarget.value);
});
不幸的是,只有Firefox支持这个事件。
以下是我认为更为清晰的方法。
首先,对于所有表单:
$('form').click(function(event) {
$(this).data('clicked',$(event.target))
});
if ($(this).data('clicked').is('[name=no_ajax]')) xhr.abort();
一个简单的方法是在每个表单按钮上使用点击事件。以下是一个带有保存、取消和删除按钮的 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>
$('.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;
});
target
返回整个表单,因此不幸的是无法帮助检测正确的提交按钮。 - HafenkranichEvent.target
不是一个字符串。它是一个 EventTarget
对象,这个对象在这种情况下是提交的表单本身。 - akseli表单的SubmitEvent有一个submitter属性。然而,截至目前,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
元素而不是事件对象。这基本上会在表单元素对象上添加一个“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);
}
(事件)
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;">
我搜索并找到了几种使用jQuery+AJAX将提交按钮name
+value
发送到服务器的方法。但我并不是很喜欢它们...
其中最好的一个是hunter在这里提出的解决方案!
但我自己写了另外一个。
我想分享一下,因为它很好用,并且像我需要的那样,也适用于通过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);
});
<button/>
共用相同的name
属性。我会使用一个类并在你的.remove()
中引用它。 - binkiname
属性。如果表单被重复使用并包含具有不同名称的提交输入,则旧输入可能会使表单混乱不堪。 - binki<button/>
元素,而代码中使用的是<input type="submit" />
,所以我没有太注意你的评论...) - J. Bruni
formobj.submit()
。我认为点击事件是最好的方法。 - Jason Orendorffevent.submitter
,它可以提供被点击的<button>
或<input type="submit">
。 - gfvevent.originalEvent.submitter
- Empty Brain