更改任何字段时如何发送新旧值？

Question

我的表单包含许多输入字段、文本区域、单选按钮、复选框。一旦在任何字段中更改值，我应该使用字段名称、old 和新值将 ajax 发送到我的服务器。我该怎么做？

更新。这是当前的方法：

oldValueHolder = null;
$('input[type="text"]').focus(function() {
  oldValueHolder = this.value; 
});

$('input[type="text"]').focusout(function() {
  if (this.value != oldValueHolder) alert(this.name + ': ' + oldValueHolder + ' -> ' + this.value);
});

$('input[type="checkbox"]').click(function(event) {
  alert(this.name + ': ' + !$(event.target).is(":checked") + ' -> ' + $(event.target).is(":checked"));
});

但我仍然不清楚如何对单选按钮执行相同的操作。

Upd2.这是单选按钮的解决方案：

$('input[type="radio"]').change(function() {          
  alert(this.name + ': ' + $(this).parents("div.control-group").attr('data-original-value') + ' -> ' + this.value);
  $(this).parents("div.control-group").attr('data-original-value', this.value);
});

Answer 1

您需要在旧值更改之前捕获它。一种方法是：

1. 当一个对象获得焦点时，在一个临时变量中获取它的值。
2. 如果对象值发生变化，用ajax发送新值和旧值。

这样做的优点是您没有加载具有 all 值的整个数组，您只是获得了一个具有最后一个值的滚动临时变量获得焦点的对象。更少的内存使用。

更新： 使用 jQuery 将函数绑定到“myClass”类的所有输入上的焦点事件，例如：

HTML：

<input class="myClass" type="text" />

JS：

myUniversalOldValueHolder = null; // notice this is globally scoped.

$(".myClass").focus(function() {
    myUniversalOldValueHolder = this.value; // "this" is the <input> element, in this context
});

...并使用$(".myClass").change() 来定义元素发生更改时要执行的操作。

jQuery 焦点（）：http://api.jquery.com/focus/

jQuery change(): http://api.jquery.com/change/

Answer 2

加载表单后，循环遍历所有输入元素并将它们的值保存在数组中。

然后，当其中一个发生更改时，在数组中查找旧值并将其发送到服务器。完成后，用新值更新“旧”值。

Answer 3

有几种方法可以做到这一点，但为什么不在您想知道的所有输入字段上使用data-original-value 属性呢？

<input type="text" id="txtName"
       data-original-value="Bruno Alexandre"
       value="Bruno Alexandre" />

然后在提交时，您也可以使用简单的一行发送所有原始值，而不是在 DOM 上创建一个新数组...

---

一个基于先前答案的实时示例：http://jsbin.com/atinel/10/edit

现场示例使用此方法附加输入文本的当前value并显示在页面上

function saveCurrentValues() {

  $('input[type="text"]')                   // grab all input's that are text
      .each(function() {                    // loop through all of them
        var e = $(this).val();              // get the current value
        $(this)                             // apply everything to the current element
          .attr('data-original-value', e)   // set attribute to the value
          .closest('.row')                  // navigate to the closest element that has a class of 'row'
          .find('span')                     // from there find the 'span' element
          .text(e);                         // set the 'span' element text property to the value
      });  
}