Solved

Compare data change during form resubmission

Posted on 2013-11-15
7
249 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
  • 3
  • 3
7 Comments
 
LVL 42

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 32

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
Free Trending Threat Insights Every Day

Enhance your security with threat intelligence from the web. Get trending threat insights on hackers, exploits, and suspicious IP addresses delivered to your inbox with our free Cyber Daily.

 
LVL 42

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 42

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

Threat Intelligence Starter Resources

Integrating threat intelligence can be challenging, and not all companies are ready. These resources can help you build awareness and prepare for defense.

Join & Write a Comment

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…
This article demonstrates how to create a simple responsive confirmation dialog with Ok and Cancel buttons using HTML, CSS, jQuery and Promises
The viewer will learn how to dynamically set the form action using jQuery.
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…

747 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

Need Help in Real-Time?

Connect with top rated Experts

9 Experts available now in Live!

Get 1:1 Help Now