jQuery serializeArray 不包括被点击的提交按钮
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/4007942/
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 serializeArray doesn't include the submit button that was clicked
提问by aarona
I have a form that has two buttons. One for saving a record and the other for cancelling the save procedure. I am using the rails.js(a common AJAX/jQuery plug-in for those of you not in the know)javascript file that works with jQuery for unobtrusive javascript/ajax calls. When I send the form data over ajax, I want the name and value of the button I clicked to be submitted with the rest of the data so that I can make a decision on what to do based on which button was clicked.
我有一个有两个按钮的表单。一个用于保存记录，另一个用于取消保存过程。我正在使用rails.js（一个常见的 AJAX/jQuery 插件，供不知情的人使用）javascript 文件，该文件与 jQuery 一起用于不显眼的 javascript/ajax 调用。当我通过 ajax 发送表单数据时，我希望我单击的按钮的名称和值与其余数据一起提交，以便我可以根据单击的按钮来决定要做什么。
The method in the rails.jsfile uses .serializeArray()for sending form data to the server. The problem is that this doesn't include the name/value pair of the button I've clicked. jQuery's website states that they do this on purpose (eventhough its my opinion that they should):
rails.js文件中的方法.serializeArray()用于将表单数据发送到服务器。问题是这不包括我单击的按钮的名称/值对。jQuery 的网站声明他们是故意这样做的（尽管我认为他们应该这样做）：
"The .serializeArray()method uses the standard W3C rules for successful controlsto determine which elements it should include; in particular the element cannot be disabled and must contain a name attribute. No submit button value is serialized since the form was not submitted using a button."
“该.serializeArray()方法使用成功控件的标准 W3C 规则来确定它应该包含哪些元素；特别是该元素不能被禁用并且必须包含 name 属性。没有提交按钮值被序列化，因为表单不是使用按钮提交的。”
How can they assume that a form WASN'T submitted using a button? This makes no sense and a wrong assumption I believe.
他们怎么能假设表单不是使用按钮提交的？这毫无意义，我相信这是一个错误的假设。
Under the W3C rules the button which was activated for the submission of a form is considered a successful control.
根据 W3C 规则，为提交表单而激活的按钮被视为成功控件。
Since the developers of jQuery have decided to do this on purpose, can I assume that there is another method that DOESN'Texclude the activated button in a serialization?
由于 jQuery 的开发人员已经决定故意这样做，我可以假设还有另一种方法不会在序列化中排除激活的按钮吗？
EDIT: Here is quick example of what my form might look like...
编辑：这是我的表单可能是什么样子的快速示例......
<!DOCTYPE html5>
<html>
<head>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.3/jquery.min.js" type="text/javascript"></script>
<script type="text/javascript">
$(document).ready(function() {
$('#form').submit(function(e) {
// put your breakpoint here to look at e
var x = 0;
});
});
</script>
</head>
<body>
<form id="form">
<input name="name" type="text"><br/>
<input name="commit" type="submit" value="Save"/>
<input name="commit" type="submit" value="Cancel"/>
</form>
</body>
回答by Nick Craver
There is not, the behavior is based on the submitevent of the<form>, not of a button, e.g. hitting enter or calling .submit()in JavaScript. You're mixing 2 concepts here, a .serialize()or .serializeArray()may or may not have anythingto do with a button click - it's just a separate event altogether, they're not connected. These methods at a higher level than that: you can serialize a form (or a subset of it) at any time for any reason.
没有，行为基于 的submit事件，而<form>不是按钮的事件，例如.submit()在 JavaScript 中按Enter 或调用。你在这里混合2个概念中，.serialize()或.serializeArray()可能会或可能不会有什么做的一个按钮，点击-这只是一起，他们不连接的单独的事件。这些方法比这更高：您可以随时出于任何原因序列化表单（或其子集）。
You can however add the submit name/value pair like a normal form submitting from that button would, if you're submitting from a button for example:
但是，如果您从按钮提交，则可以像从该按钮提交的普通表单一样添加提交名称/值对：
$("#mySubmit").click(function() {
var formData = $(this).closest('form').serializeArray();
formData.push({ name: this.name, value: this.value });
//now use formData, it includes the submit button
});
回答by digitalPBK
I use the following snippet, basically adds a hidden element with same name
我使用以下代码段，基本上添加了一个同名的隐藏元素
var form = $("form");
$(":submit",form).click(function(){
if($(this).attr('name')) {
$(form).append(
$("<input type='hidden'>").attr( {
name: $(this).attr('name'),
value: $(this).attr('value') })
);
}
});
$(form).submit(function(){
console.log($(this).serializeArray());
});
回答by Robert Waddell
This solution is 'universal' as in it will handle all your input submits, passing each as a form variable on submission.
这个解决方案是“通用的”，因为它将处理您所有的输入提交，在提交时将每个作为表单变量传递。
$(document).ready(function(){
$('input:submit').each(function(){
$(this).click(function(){
var formData = $(this).closest('form').serializeArray();
formData.push({ name: $(this).attr('name'), value: $(this).val() });
});
});
});
回答by commonpike
fairly neat way to solve this:
解决这个问题的相当巧妙的方法：
<form>
<input type="hidden" name="stuff" value="">
<button type="submit" onclick="this.form.stuff.value=this.value" value="reset">reset</button>
<button type="submit" onclick="this.form.stuff.value=this.value" value="delete">delete</button>
</form>
回答by kjdion84
var form = button.closest('form');
var serialize = form.serialize();
if (button.attr('name') !== undefined) {
serialize += '&'+button.attr('name')+'=';
}
