Go Premium for a chance to win a PS4. Enter to Win

x
?
Solved

Compare data change during form resubmission

Posted on 2013-11-15
7
Medium Priority
?
288 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 44

Assisted Solution

by:Chris Stanyon
Chris Stanyon earned 1002 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 34

Assisted Solution

by:Big Monty
Big Monty earned 498 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
Concerto's Cloud Advisory Services

Want to avoid the missteps to gaining all the benefits of the cloud? Learn more about the different assessment options from our Cloud Advisory team.

 
LVL 44

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 44

Accepted Solution

by:
Chris Stanyon earned 1002 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

Concerto Cloud for Software Providers & ISVs

Can Concerto Cloud Services help you focus on evolving your application offerings, while delivering the best cloud experience to your customers? From DevOps to revenue models and customer support, the answer is yes!

Learn how Concerto can help you.

Question has a verified solution.

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

In this article you'll learn how to use Ajax calls within your CodeIgniter application. To explain this, I'll illustrate how to implement a simple contact form to allow visitors to send you an email through your web site.
This article discusses how to create an extensible mechanism for linked drop downs.
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…
Suggested Courses

916 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