Solved

Compare data change during form resubmission

Posted on 2013-11-15
7
265 Views
Last Modified: 2013-12-03
When a HTML page the page is closed, we need to alert saying

"There are some data changed which is not saved, do you want to close?"

Is there JQuery built in method to know whether the form data is changed.

or need to follow a complex way,

1. Introduce a local java script variable and capture all the form data in onload event.
2. While Close the window, Compare the local java script variables and form input values, if there is a change alert.
0
Comment
Question by:ZoniacUser
[X]
Welcome to Experts Exchange

Add your voice to the tech community where 5M+ people just like you are talking about what matters.

  • Help others & share knowledge
  • Earn cash & points
  • Learn & ask questions
  • 3
  • 3
7 Comments
 
LVL 43

Assisted Solution

by:Chris Stanyon
Chris Stanyon earned 334 total points
ID: 39651071
I don't know of a built in method, but you could use the jQuery change event.

Create a global variable:

var changed = false;

Bind the change event to each of your form elements:

$('input').change(function() {
   changed = true;
});

And then on close, check it. You'd need a way to reset it back to false, probably on the form submit button.
0
 
LVL 33

Assisted Solution

by:Big Monty
Big Monty earned 166 total points
ID: 39651444
you can do something like this:

$("form :input").change(function() {
  $(this).closest('form').data('changed', true);
});
$('#mybutton').click(function() {
  if($(this).closest('form').data('changed')) {
     //do something
  }
});

Open in new window


This attaches a change event handler to the inputs on the form, if any of them changes, it uses .data() to set a changed value to true, then we just check for that value on the click
0
 

Author Comment

by:ZoniacUser
ID: 39692138
I've requested that this question be deleted for the following reason:

I dont want
0
Understanding Linux Permissions

Linux for beginners: How to view the permissions associated with files and directories and also how you can change them.

 
LVL 43

Expert Comment

by:Chris Stanyon
ID: 39691968
What do you mean you 'don't want'. You asked a question, and you got some answers. It's considered bad manners to just delete the question, without ever interacting with the Experts that tried to help you!!
0
 

Author Comment

by:ZoniacUser
ID: 39691979
This was done by mistake, we apologize for this.
0
 

Author Comment

by:ZoniacUser
ID: 39691985
We were waiting for a better solution, Both solution given works great.

But in here we are trying to say.

Ex.,

1. Say you have a page, which has a text field
2. The Text field is populated as "Java Developer" while page is loaded
3. The user removes the Java Developer and again types Java Developer
4. According to code the field is changed
5. But According to user the form is not changed.

We just want to know whether there is any built in solution for this in JQuery or to follow the traditional way (What we have done now)

1. Introduce a local java script variable and capture all the form data in onload event.
2. While Close the window, Compare the local java script variables and form input values, if there is a change alert.
0
 
LVL 43

Accepted Solution

by:
Chris Stanyon earned 334 total points
ID: 39692047
There is no single-function way built in to do this - but it can be done :)

You'll just have to write some code to manage it. The principal is that on page load, you store the default values of each form field, and then on page close you check each of the form values against the stored defaults - if they differ you create an alert!
0

Featured Post

Want Experts Exchange at your fingertips?

With Experts Exchange’s latest app release, you can now experience our most recent features, updates, and the same community interface while on-the-go. Download our latest app release at the Android or Apple stores today!

Question has a verified solution.

If you are experiencing a similar issue, please ask a related question

DOM Attributes and Properties treatment with jQuery 1.6 by Ivo Stoykov jQuery (http://jquery.com/) 1.6 introduces .prop() (http://api.jquery.com/prop/) and .removeProp() (http://api.jquery.com/removeProp/) methods which allow modifying or removi…
Introduction JSON is an acronym for JavaScript Object Notation.  It is a text-string data transport mechanism, capable of representing simple or complex data structures in a consistent and easy-to-read manner.  Similar in concept to XML, but more e…
The viewer will learn the basics of jQuery, including how to invoke it on a web page. Reference your jQuery libraries: (CODE) Include your new external js/jQuery file: (CODE) Write your first lines of code to setup your site for jQuery.: (CODE)
The viewer will learn the basics of jQuery including how to code hide show and toggles. Reference your jQuery libraries: (CODE) Include your new external js/jQuery file: (CODE) Write your first lines of code to setup your site for jQuery…
Suggested Courses

623 members asked questions and received personalized solutions in the past 7 days.

Join the community of 500,000 technology professionals and ask your questions.

Join & Ask a Question