Question

我的表单包含许多输入字段，文本区域，单选按钮，复选框。在任何字段中更改值后，我应该使用字段名称旧和新值将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

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

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

Answer 2

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

当一个对象获得焦点时，在临时变量中获取它的值。

如果更改了对象值，请在ajax中发送新值和旧值。

优势对此你没有用所有值加载整个数组，你刚刚得到一个滚动临时变量，其值为最后一个获得焦点的对象。减少内存使用量。

<强>更新：使用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 focus（）：http://api.jquery.com/focus/

jQuery change（）：http://api.jquery.com/change/

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
      });  
}

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

3 个答案: