Как отправить новое и старое значение при изменении какого-либо поля?

Question

У меня есть форма с несколькими полями ввода, текстовыми областями, переключателями, флажками. После изменения значения в любом поле я должен отправить ajax на свой сервер с именем поля, old и новыми значениями. Как я могу это сделать?

Upd. Вот текущий подход:

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 для привязки функции к событию focus на всех входах класса "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 2

Есть несколько способов сделать это, но почему бы не использовать атрибут data-original-value во всех полях ввода, которые вы хотите знать?

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

Затем при отправке вы можете отправить все исходные значения какхорошо с простой строкой, вместо этого создавая в DOM готовый к новому массиву ...

---

a Live Пример на основе предыдущего ответа: http://jsbin.com/atinel/10/edit

LiveВ примере используется этот метод для прикрепления текущего 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
      });  
}

Answer 3

Как только ваша форма загружена, переберите все входные элементы и сохраните их значения в массиве.

Затем, когда один из них будет изменен, найдите старое значение в массиве и отправьте его на сервер. Когда закончите, обновите «старое» значение новым значением.