jQuery 如何覆盖提交按钮并收集表单数据
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/8582415/
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
How to override a submit button and gather form data
提问by mlissner
I have a web page like this:
我有一个这样的网页：
<form id="some-form">
<input type='text'>
<button type="submit">
</form>
. . . later in the page . . .
<div id="more-inputs">
<input type="checkbox">
<input type="text">
</div>
For various reasons, the later inputs and check boxes can't go in the original form, but when the form is submitted, I want to use jQuery to gather the values from the checkboxes and the other forms, and submit them as a GET request.
由于种种原因，后面的inputs和checkbox进不去原来的表单，但是在提交表单的时候，我想用jQuery从checkboxes和其他表单中收集值，作为GET请求提交.
回答by isNaN1247
To do this as a GETI'd first move the values you need up into some appended, hidden inputs into your form. Then you can call $.getwith the databeing a serialized version of your newly updated form.
为此，GET我首先将您需要的值移动到一些附加的隐藏输入中。然后，你可以调用$.get与data为您的新更新形式的序列化版本。
So:
所以：
$('#some-form').submit(function(e) {
e.preventDefault();
$('#more-inputs input').each(function() {
var el = $(this);
$('<input type="hidden" name="' + el.attr('name') + '" />')
.val(el.val())
.appendTo('#some-form');
});
$.get('http://yoururl.com', $('#some-form').serialize(), function (data) {
alert('handle your data here: ' + data);
});
});
Note: this requires that you have some name attributes on you inputs in 'more-inputs'
注意：这要求您在“更多输入”中的输入上具有一些名称属性
回答by Gabe
Just trap the submiteventfor your form?
只是submitevent为你的form?
$('#some-form').submit(function(){
// do work
// do a jquery get or whatever you need to do...
$.get('myurl.html', function(data) {
});
return false; // return false to prevent typical submit behavior
});
回答by Dennis Traub
You can intercept the submit-event
您可以拦截submit-event
$('#some-form').submit(function() {
// your code goes here
});
回答by Mariano Desanze
isNaN1247's answerproperly resolves the part about overriding the submit, but you don't actually have to move the elements into the form.
isNaN1247 的答案正确解决了关于覆盖提交的部分，但您实际上不必将元素移动到表单中。
jQuery can directly serialize those inputs inside the div. You just need to provide a selector for getting each of those inputs (as explained in this answer). And jQuery lets you handle both the form inputs, and the other inputs, all at once:
jQuery 可以直接序列化 div 中的这些输入。您只需要提供一个选择器来获取每个输入（如本答案中所述）。jQuery 允许您同时处理表单输入和其他输入：
$('#some-form').submit(function(e) {
e.preventDefault();
var requestData = $('#some-form, #more-inputs :input').serialize();
$.get('http://yoururl.com', requestData, function (data) {
alert('handle your data here: ' + data);
});
});
Note: this answer also requires that you have some name attributes on you inputs (both in 'more-inputs' and inside the form).
注意：此答案还要求您在输入中具有一些名称属性（在“更多输入”中和表单内）。
You might want to test what serializereturns with the following code snippet:
您可能想要serialize使用以下代码片段测试返回的内容：
$('#some-form').submit(function(e) {
e.preventDefault();
var requestData = $('#some-form, #more-inputs :input').serialize();
console.log(requestData);
});<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<form id="some-form">
<input type='text' name="a" value="aaa">
<input type='text' name="b" value="bbb">
<button type="submit">submit</button>
</form>
. . . later in the page . . .
<div id="more-inputs">
<input type="checkbox" name="checked" checked>
<input type="text" name="d" value="ddd">
</div>