jQuery 提交，我怎么知道按下了什么提交按钮？
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/2154039/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
jQuery submit, how can I know what submit button was pressed?
提问by newbie
I'm using ajaxSubmit plugin to send Ajax forms, but for some reason this plugin doesn't send names/values of input[type=image]'s. So now I'm catching the submit event before ajaxSubmit will handle the form and I need to know if it is possible to find out what button was pressed?
我正在使用 ajaxSubmit 插件发送 Ajax 表单，但由于某种原因，该插件不发送input[type=image]'s 的名称/值。所以现在我在 ajaxSubmit 处理表单之前捕获提交事件，我需要知道是否有可能找出按下了什么按钮？
采纳答案by cusspvz
$("input .button-example").click(function(){
//do something with $(this) var
});
PS: do you have jQuery controling the $ var? Otherwise you have to do this:
PS：你有jQuery控制$ var吗？否则你必须这样做：
jQuery.noConflict();
jQuery(document).ready(function(){
jQuery("input .button-example").click(function(){
//do something with jQuery(this) var
alert(jQuery(this));
});
});
if you wan't control on event (form submit)
如果您不想控制事件（表单提交）
$(document).ready(function(){
$("#formid").submit(function() {
alert('Handler for .submit() called.');
return false;
});
});
tell me something if it worked ;)
如果有效，请告诉我；)
回答by karim79
This will catch whichever input element initiated the submit:
这将捕获启动提交的任何输入元素：
$(document).ready(function() {
var target = null;
$('#form :input').focus(function() {
target = this;
alert(target);
});
$('#form').submit(function() {
alert(target);
});
});
回答by thaddeusmt
This is what I am using (slight variation on the others, using mouseup and keyup events instead of focus):
这就是我正在使用的（其他的略有变化，使用 mouseup 和 keyup 事件而不是焦点）：
var submitButton = undefined;
$('#your-form-id').find(':submit').live('mouseup keyup',function(){
submitButton = $(this);
});
$('#your-form-id').submit(function() {
console.log(submitButton.attr('name'));
});
回答by Aram Kocharyan
I found this very useful. It covers the case of clicking, and also submitting with tab index and hitting space or enter. It captures the last input before a submit was made, and that's the button which submitted, so you can have several buttons and check each as a target to perform something unique.
我发现这非常有用。它涵盖了点击的情况，还包括提交标签索引和点击空格或输入。它在提交之前捕获最后一个输入，这就是提交的按钮，因此您可以拥有多个按钮并将每个按钮检查为目标以执行独特的操作。
$('#form input').live('focusin focusout mouseup', function() {
// Add a data attribute to the form and save input as last selected
$('#form').data('lastSelected', $(this));
});
$('#form').submit(function() {
var last = $(this).data('lastSelected').get(0);
var target = $('#button').get(0);
console.log(last);
console.log(target);
// Verify if last selected was our target button
if (last == target) {
console.log('bingo');
return false;
}
});
回答by drupalfever
Following is what I think would be a more comprehensive example of how to accomplish what you asked. You should replace the "#your-form" with your id form and replace "Button One" & "Button Two" with the values on your form buttons.
以下是我认为将是如何完成您所要求的更全面的示例。您应该将“ #your-form”替换为您的 id 表单，并将“按钮一”和“按钮二”替换为表单按钮上的值。
$(document).ready(function() {
var target = null;
$('#your-form-id :input').focus(function() {
target = $(this).val();
});
$('#your-form-id').submit(function() {
if (target == 'Button One') {
alert (target);
}
else if (target == 'Button Two') {
alert (target);
}
});
});
回答by Gazillion
This is how I solved it. I was inspired by some of the answers posted above but I needed an approach that would work for all my forms since I loaded them dynamically.
我就是这样解决的。我受到上面发布的一些答案的启发，但我需要一种方法，因为我是动态加载它们的，因此它适用于我的所有表单。
I noticed that the ajaxSubmit had a dataoption which described by the plugin does the following:
我注意到 ajaxSubmit 有一个data由插件描述的选项，它执行以下操作：
An object containing extra data that should be submitted along with the form.
包含应与表单一起提交的额外数据的对象。
This is exactly what we need.
这正是我们所需要的。
So I attached the click handler on my submit buttons and saved the element using jQuery (I prefer this method than adding a fake attribute):
所以我在我的提交按钮上附加了点击处理程序并使用 jQuery 保存元素（我更喜欢这种方法而不是添加一个假属性）：
$('[type="submit"]').live('click', function(e){
jQuery.data( $(this).parents('form')[0], 'submitTrigger', $(this).attr('name'));
});
And then in my ajaxSubmit call I built the data object and sent it like this:
然后在我的 ajaxSubmit 调用中，我构建了数据对象并像这样发送它：
function dialogFormSubmit( form ) {
var data = {}
data[jQuery.data( form, 'submitTrigger')] = true;
$(form).ajaxSubmit({
data: data
});
return false;
}
I built the data object that way because I wanted it to behave the same way as if I would have submitted it with vanilla HTML/PHP (name of the input is the key in the $_POST array). I suppose if I wanted to stay true to its real behaviour I would have added the value or innerHTML of the submit button but I usually just check if it's set so it was unncessary :).
我以这种方式构建了数据对象，因为我希望它的行为方式与我使用普通 HTML/PHP 提交的方式相同（输入的名称是 $_POST 数组中的键）。我想如果我想忠实于它的真实行为，我会添加提交按钮的值或innerHTML，但我通常只是检查它是否已设置，所以它是不必要的:)。
回答by Janckos
$(document).ready(function() {
var clickedVar = null;
$('#form :submit').focus(function() {
clickedVar = $(this).attr("name");
alert(clickedVar);
});
});
回答by MaNu
Hi the answer did not convince me so much here to bring an alternative. What I will do is verify by JS which button was pressed.
嗨，答案并没有说服我在这里带来替代方案。我要做的是通过 JS 验证按下了哪个按钮。
<head>
<script>
$('body').click(function(event) {
var log = $('#log');
if($(event.target).is('#btn1')) {
log.html(event.target.id + ' was clicked.');
return false;
}else{
if($(event.target).is('#btn2')) {
log.html(event.target.id + ' was clicked.');
return false;
}
}
});
</script>
</head>
<body>
<form id="formulario" method="post">
<div id="log"></div>
<input type="submit" id="btn1" value="Btn 01">
<input type="submit" id="btn2" value="Btn 02">
</form>
</body>
Use this page to make the test Test
使用此页面进行测试Test
Saludos
萨卢多斯
