Question

There is a div (form) which opens on the click of a button. There are certain controls in that form like timefields, date, textboxes. When the form opens it is pre-loaded with data. A submit button (Apply Changes) for the form is there as well.

If i simply click on “Apply Changes” button without changing anything in the form, no action takes place but if I change anything say time, date or text, the form gets saved.

How can we define this behavior??

Sorry for the misinterpreting language…

My form is not getting saved if i simply click on “Apply Changes” button.
Does one of the controls need to be edited prior to saving a form in jquery?

Answer 1

Here’s a rough way of tracking changes to form data:

function dealWithForm(){
  var hasChanged = false,
      $form = $('form');

  $('input, select', $form).on('change', function(){
    hasChanged = true;
  });

  $('form').submit(function(){
    if(hasChanged){
      $form.submit();
      // or post asynchronously with ajax    
      hasChanged = false;
      $.post( // blah blah );
    } else {
      // stop form from submitting.
      return false;    
    }
  });
}

$(document).ready(function(){
  dealWithForm();
});