Using jQuery to handle confirmation of navigating away from HTML Forms in edit mode

On my recent project, I had a requirement that stated that I needed to warn the end users when they tried to navigate away from an HTML Form that they started editing. The warning message was to indicate that they were leaving and they forgot to hit the submit button.

There are many ways for end users to navigate away from a given HTML Form. They could click a link within the application, they could close the browser, or type in a new URL. This solution focuses on clicking available links on the application they are on.

For this solution I used jQuery. I am a big fan of jQuery and I use it whenever I can.

The solution basically involves tracking user activity when they are working with an HTML Form. By tracking I mean to capture their actions when they click/focus on HTML form elements such as input, select, textarea, radio, and checkbox.

Here is the code that handles all this:

var somethingChanged = false;
$(document).ready(function() { 
   handleReady();
});

function handleReady() 
{
   $("input").change(function() { 
        somethingChanged = true; 
   });
   
   $("select").change(function() { 
        somethingChanged = true; 
   });
   
   $("textarea").change(function() { 
        somethingChanged = true; 
   });
   
   $("radio").change(function() { 
        somethingChanged = true; 
   });
   
   $("checkbox").change(function() { 
        somethingChanged = true; 
   });
  
   translateHrefs();
}

function translateHrefs() 
{
  $("a").unbind();  
  $('a').click(function(){
     if(somethingChanged) {
        var text = jQuery.trim($(this).attr("innerHTML"));    
        if(text.indexOf("Delete") >= 0 || text.indexOf("Edit") >= 0
            || text.indexOf("Save") >= 0 || text.indexOf("Update") >= 0 || text.indexOf("Cancel") >= 0
            || text.indexOf("Add") >= 0 || text.indexOf("Add New") >= 0)
        {
                return true;
        }
        
        /*var textHref = jQuery.trim($(this).attr("href"));
        if(textHref.indexOf("javascript") >= 0) {
            return true;
        }*/
        
        var ans = confirm("Are you sure you want to navigate with out saving your changes?");
        if(ans) {
            return true;
        }else {
            return false;
        }
     }
  });
}

There is a global variable called somethingChanged that is initially set to false. This variable is the control variable and can be set to true if user focuses on any of the form elements. For example, it would be set to true if the end user clicked on a radio button or entered a text into a textarea.

I use jQuery's ready function to set this all up. You can find out more about the ready function here. In this function I basically attach inline functions to HTML elements' (input, select, textarea etc) onchange event that sets the "somethingChanged" control variable to true. "handleReady" is the function that attaches these inline functions to onchage event of these html elements. At the end of the function you can see that there is another function call to a function named translateHrefs. This method basically uses jQuery functionality to attach click event to all hrefs on the current document object. In the click event I create a confirmation window and warn the user to save the form before the browser renders the new page. I handle this by returning true or false. You can bypass links (if you do not want to render confirmation window) by looking at clicked href elements attributes. There are many way to handle this. I looked at the innerHTML attribute and checked to see if it was a match to certain ones. You can look at the class attribute and skip links that have a certain class.

This was a very quick and a global fix. Anytime a new page was created, this would kick in.