13 Votes

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).

ReplyPositiveNegativeDateVotes
00 Votes

And how does the javascript part look like?
2013-07-28 at 02:06

ReplyPositive Negative
00 Votes

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

Positive Negative
Reply
Reply

About the Author

AvatarYou 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

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.