选择/使用jQuery只提交修改表单字段 [英] Select/submit only changed form fields with jQuery
问题描述
我正在寻找一种方式来只提交更改的表单域服务器。所以,让我们说,我有一个表格
I'm looking for a way to submit only changed form fields to the server. So, let's say I have a form
<form>
<input type="text" name="a"/>
<select name="b">...</select>
<input type="checkbox" name="c"/>
</form>
这是填充了已经确定的数据。用户编辑表单并点击提交。如果用户只改变输入B,那么我想只提交输入B。如果只有A和C发生了变化,我想只提交a和c。等等。
which is populated with certain data already. The user edits the form and clicks submit. If the user only changed input b, then I want to submit only input b. If only a and c were changed, I want to submit only a and c. And so on.
我可以写的东西自己要做到这一点,但我想知道,也许已经有东西在那里,我可以用?理想情况下,我想code短。这样的事情将是完美的:
I could write something myself to accomplish this, but I am wondering maybe there is already something out there that I could use? Ideally, I would like the code to be short. Something like this would be perfect:
$('form').serialize('select-only-changed');
另外,我碰到这个<少时href=\"http://$c$c.google.com/p/jquery-form-observe/\">http://$c$c.google.com/p/jquery-form-observe/ ,但我看到它存在的问题。难道这个插件工作扎实?谢谢!
Also, I came across this http://code.google.com/p/jquery-form-observe/ , but I see there are issues with it. Is this plugin working solidly? Thanks!
编辑:谢谢大家谁给了一个答案。我选择了新民主党的答案,因为它适合放在什么我已经有了。
Thank you all who gave an answer. I chose ndp's answer because it fit best into what I already have.
推荐答案
另一种方法是将连载
在页面加载时,再上提交,只能提交表单的变化。
Another approach would be to serialize
the form when the page loads, and then on submit, only submit the changes.
$(function() {
var $form = $('form');
var startItems = convertSerializedArrayToHash($form.serializeArray());
$('form').submit() {
var currentItems = convertSerializedArrayToHash($form.serializeArray());
var itemsToSubmit = hashDiff( startItems, currentItems);
$.post($form.attr('action'), itemsToSubmit, etc.
}
});
然后,你必须写在 hashDiff
功能,这是简单的,一般是有用的。
Then, all you have to write is the hashDiff
function, which is straightforward and generally useful.
这是很好的,因为它可以很容易地打包成一个插件,它可以在同一表格上反复工作,如果你使用的Ajax。
This is nice because it can easily be packaged into a plugin, and it can work repeatedly on the same form if you're using Ajax.
function hashDiff(h1, h2) {
var d = {};
for (k in h2) {
if (h1[k] !== h2[k]) d[k] = h2[k];
}
return d;
}
function convertSerializedArrayToHash(a) {
var r = {};
for (var i = 0;i<a.length;i++) {
r[a[i].name] = a[i].value;
}
return r;
}
下面是一个最小的测试:
Here's a minimal test:
describe('hashDiff()', function() {
it('should return {} for empty hash',function() {
expect(hashDiff({},{})).toEqual({});
});
it('should return {} for equivalent hashes',function() {
expect(hashDiff({a:1,b:2,c:3},{a:1,b:2,c:3})).toEqual({});
});
it('should return {} for empty hash',function() {
expect(hashDiff({a:1,b:2,c:3},{a:1,b:3,c:3})).toEqual({b:3});
});
});
这篇关于选择/使用jQuery只提交修改表单字段的文章就介绍到这了,希望我们推荐的答案对大家有所帮助,也希望大家多多支持IT屋!