选择/使用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屋！