jQuery: Note when leaving a website and a form has not been submitted
Tutorial by Stefan Trost | 2012-08-10 at 16:03
If you filled out a long form on a website in laborious work, it is extremely annoying when you accidentally click on a link, leave the page and lose all of your inputs, so that you have to re-enter all of them again.
In this small tutorial, I will show you a way how to prevent users from leaving a page after filling out a form, except they explicitly want it. We are using JavaScript and jQuery to realize this. The code that I will introduce here shows a message in which you can decide whether you really want to leave the page, after you have filled out a form and you are about to leave the site on a different way than by submitting the form.
HTML
In our HTML document, we assign the class "unloadmsg" to all elements like text areas, input fields and select boxes that should trigger the alarm when leaving the page.
<form name="demo" method="post" action=""> <input name="input1" type="text" class="unloadmsg" value=""> <input name="input2" type="text" value=""> <select name="select1" class="unloadmsg"> <option value="1">1</option> <option value="2">2</option> </select> <textarea name="textarea1" class="unloadmsg"></textarea> <input name="submit" type="submit" value="Save"> </form>
If an element should not trigger the warning, we just do not assign the class to it. In the example above, I have assigned the class to "input1" but not to "input2". Therefore, the message will not be displayed when changes were made in "input2", but it will be displayed when there are changes in "input1".
jQuery
The warning should only be displayed when actually there are changes in the input fields with the class "unloadmsg". If the user has not filled out or changed anything, we do not want to display the warning message. Therefore, we ensure with jQuery, that only after there were changes in one of the input fields (change event), the message should be set (bind event).
$(document).ready(function() { $('.unloadmsg').change(function() { $(window).bind('beforeunload', function() { return 'Do you really want to leave the page?'; }); }); $("form").submit(function() { $(window).unbind('beforeunload'); }); });
Finally, we need to ensure that leaving the page when submitting the form (click on the submit button) remains possible. Therefore, we define in the last part of our jQuery code, that the attached action will be removed when clicking on the submit button (unbind).
About the Author
You can find Software by Stefan Trost on sttmedia.com. Do you need an individual software solution according to your needs? - sttmedia.com/contact
Show Profile
Related Topics
JavaScript: Show warning when leaving the page
Info | 0 Comments
JavaScript: Catch Submit of Form
Tutorial | 0 Comments
Delphi: Event Order of a Form - From OnCreate to OnDestroy
Info | 1 Comment
Send HTML5 Canvas as Image to Server
Tutorial | 0 Comments
jQuery: Submit complete form and receive content with Ajax
Tutorial | 0 Comments
How to resize Image before Upload in Browser
Tutorial | 13 Comments
Important Note
Please note: The contributions published on askingbox.com are contributions of users and should not substitute professional advice. They are not verified by independents and do not necessarily reflect the opinion of askingbox.com. Learn more.
Participate
Ask your own question or write your own article on askingbox.com. That’s how it’s done.
And how does the javascript part look like?
2013-07-28 at 02:06
Can't you see the JavaScript part?
It is the part under the header jQuery. In fact, jQuery is JavaScript.
2013-07-28 at 03:11