I have the form with a number of input fields, text areas, radio buttons, check boxes. Once value is changed in any field, I should send ajax to my server with field name, old and new values. How can I do it?

Upd. Here is the current approach:

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

But I am still not clear how to do the same with radio buttons.

Upd2. Here is the solution for radio buttons:

$('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);
});

I have the form with a number of input fields, text areas, radio buttons, check boxes. Once value is changed in any field, I should send ajax to my server with field name, old and new values. How can I do it?

Upd. Here is the current approach:

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

But I am still not clear how to do the same with radio buttons.

Upd2. Here is the solution for radio buttons:

$('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);
});

• javascript
• jquery
• ajax
• forms

Share Improve this question Follow edited Feb 23, 2012 at 8:11 LA_ asked Feb 16, 2012 at 17:12 LA_LA_ 20.4k6060 gold badges179179 silver badges318318 bronze badges

Add a ment  | 

3 Answers 3

Sorted by: Reset to default 2

You'll need to capture the old value before it's changed. One way to do that is:

1. When a object gets focus, get its value in a temporary variable.
2. If the object value is changed, send the new value and old value in ajax.

The advantage to this is you're not loading a whole array with all values, you've just got a rolling temporary variable that has the value of the last object that received focus. Less memory usage.

UPDATE: Using jQuery to bind a function to the focus event on all inputs of class "myClass", E.g.:

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

...and use $(".myClass").change() to define what to do when an element has been changed.

jQuery focus(): http://api.jquery./focus/

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

As soon as your form is loaded, loop through all input elements and save their values in an array.

Then, when one of them is changed, look up the old value in the array and send it to the server. When done, update the "old" value with the new value.

There are several ways to do this, but why not using a data-original-value attribute on all input fields that you want to know this?

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

Then upon submit you can send all original values as well with a simple line instead creating on DOM ready for a new array...

---

a Live Example based on previous answer: http://jsbin./atinel/10/edit

Live example uses this method to attach the current value of an input text and show it on the page

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