Check For Any Unsaved Changes In A Page

Sibeesh Venu

jQuery HTML5Check for unsaved changes in pageShow alert on unsaved changes

26 Comments

Join the conversation! Your thoughts help the community grow.

Sibeesh Venu11y ago
Mohammed Ibrahim Thank you
Sibeesh Venu11y ago
Ankit Bansal Thank you
Mohammed Ibrahim11y ago
nice
Ankit Bansal11y ago
nice..
Sibeesh Venu11y ago
Harshad Pansuriya Thanks a lot
Harshad Pansuriya11y ago
Nice One
Sibeesh Venu11y ago
Vipul Malhotra Thanks a lot
Sibeesh Venu11y ago
N Vinodh Thanks a lot
Vipul Malhotra11y ago
nice article
Vinodh Narayanan11y ago
nice share
Sibeesh Venu11y ago
Humayun Kabir Mamun Thanks a lot
Sibeesh Venu11y ago
Nilesh Jadav Thanks a lot
Sibeesh Venu11y ago
Nihal Ahmed Thanks a lot
Sibeesh Venu11y ago
Rakesh Chavda Thanks a lot
Sibeesh Venu11y ago
Rajeesh Menoth Thanks a lot
Sibeesh Venu11y ago
Santhakumar Munuswamy Thanks a lot
Sibeesh Venu11y ago
Manas Mohapatra Thanks a lot
Sibeesh Venu11y ago
Pankaj Kumar Choudhary Thanks a lot
Humayun Kabir Mamun11y ago
Nice...
Nilesh Jadav11y ago
Great post
Nihal Ahmed11y ago
nice one sir.
Rakesh11y ago
Good share
Rajeesh Menoth11y ago
Thanks for sharing..Nice One
Santhakumar Munuswamy11y ago
Good one
Manas Mohapatra11y ago
Informative one..
Pankaj Kumar Choudhary11y ago
Simple and useful information..........

In this post we will discuss how we can check for any unsaved changes in the page by using JQuery. Normally this may need to be implemented in an application where we need to give any alert if any user try to reload the page when there any unsaved changes in the page. I hope you will like this.

Background

I was creating a page where I have some text boxes, so I wanted to give an alert if user try to get away from the page without saving the data entered.

Please read this article in my blog here.

Using the code

First of all we will create a page and an html table.

<!DOCTYPE html>
<html>
<head>
<title>Check for any unsaved changes in page</title>
<script src="jquery-2.0.2.min.js"></script>
</head>
<body>
<table class="table" border="1" style="width: 40%">
<tr>
<td>Sibi</td>
<td>Ajay</td>
<td>
<input class="text" type="text" />
</td>
</tr>
<tr>
<td>Ansu</td>
<td>Akhil</td>
<td>
<input class="text" type="text" />
</td>
</tr>
<tr>
<td>Shanto</td>
<td>Libin</td>
<td>
<input class="text" type="text" />
</td>
</tr>
</table>
</body>
</html>

Now if you run your page, you can see the table.

Check for any unsaved changes in page

No we will create a bool variable which will be true when there is an unsaved data.

var unsaved = false;

What next? We will add call to an existing function when user reloads the page. Sounds good?

window.onbeforeunload = unloadPage;

As you can see we are calling a function unloadPage, preceding is the function definition.

function unloadPage() {
if (unsaved) {
return "You have unsaved changes on this page.";
}
}

Now please run your page and type anything in the text box given, then reload your page.

You will get an alert of "You have unsaved changes on this page." Shall we check that?

Check for any unsaved changes in page

We have done it finally.

Complete Code

<!DOCTYPE html>
<html>
<head>
<title>Check for any unsaved changes in page</title>
<script src="jquery-2.0.2.min.js"></script>
<script>
var unsaved = false;
$(document).on('change', '.table .text', function () {
unsaved = true;
});
$(document).on('mouseover', '.table td', function () {
$(this).attr('title', $(this).text());
});
function unloadPage() {
if (unsaved) {
return "You have unsaved changes on this page.";
}
}
window.onbeforeunload = unloadPage;
</script>
</head>
<body>
<table class="table" border="1" style="width: 40%">
<tr>
<td>Sibi</td>
<td>Ajay</td>
<td>
<input class="text" type="text" />
</td>
</tr>
<tr>
<td>Ansu</td>
<td>Akhil</td>
<td>
<input class="text" type="text" />
</td>
</tr>
<tr>
<td>Shanto</td>
<td>Libin</td>
<td>
<input class="text" type="text" />
</td>
</tr>
</table>
</body>
</html>

Conclusion

Did I miss anything that you may think which is needed? Have you ever faced this requirement in your programming life? Does this article helps you in anyway? I hope you liked this article. Please share me your valuable suggestions and feedback.

Your turn. What do you think?

A blog is not a blog without comments, but do try to stay on topic. If you have a question, then please mention it in the comments section.