Question

156

Generic way to detect if html form is edited

rated 0 times [ 159] [ 3] / answers: 1 / hits: 117801 / 15 Years ago, sat, june 6, 2009, 12:00:00

I have a tabbed html form. Upon navigating from one tab to the other, the current tab's data is persisted (on the DB) even if there is no change to the data.

I would like to make the persistence call only if the form is edited. The form can contain any kind of control. Dirtying the form need not be by typing some text but choosing a date in a calendar control would also qualify.

One way to achieve this would be to display the form in read-only mode by default and have an 'Edit' button and if the user clicks the edit button then the call to DB is made (once again, irrespective of whether data is modified. This is a better improvement to what is currently existing).

I would like to know how to write a generic javascript function that would check if any of the controls value has been modified ?

Answers

Only authorized users can answer the question. Please sign in first, or register a free account.

aileent

Add To Favorites

Follow

Total Points: 556

Total Questions: 107

Total Answers: 101

Location: Croatia

Member since Fri, Sep 11, 2020

4 Years ago

aileent questions

1 Next.js, getStaticProps not working with component but does with page

Tue, Mar 1, 22, 00:00, 2 Years ago

1 Why am I getting Failed to load extension. Invalid value for 'content_security_policy'?

Fri, Apr 16, 21, 00:00, 3 Years ago

1 Laravel livewire model is not working when updating input field from javascript?

Sun, Nov 29, 20, 00:00, 4 Years ago

1 How to get Input field type as props in react typescript

Wed, Nov 11, 20, 00:00, 4 Years ago

1 React Native Render error missing semicolon

Fri, May 8, 20, 00:00, 4 Years ago

View All

answered 15 Years ago karolinab · Accepted Answer

In pure javascript, this would not be an easy task, but jQuery makes it very easy to do:

$(#myform :input).change(function() {

   $(#myform).data(changed,true);

});

Then before saving, you can check if it was changed:

if ($(#myform).data(changed)) {

   // submit the form

}

In the example above, the form has an id equal to myform.

If you need this in many forms, you can easily turn it into a plugin:

$.fn.extend({

 trackChanges: function() {

   $(:input,this).change(function() {

      $(this.form).data(changed, true);

   });

 }

 ,

 isChanged: function() { 

   return this.data(changed); 

 }

});

Then you can simply say:

$(#myform).trackChanges();

and check if a form has changed:

if ($(#myform).isChanged()) {

   // ...

}