jQuery - Preventing submission of unsaved form

Question

I have a table of customers, each row has a method which pops down an inline form, displaying the customers details. Also on this page is a search, some tabs, and some href links & functions.

What I am trying to do is prevent the user from being able to leave this form in an unsaved state. so I have a variable formChanged set to TRUE on form input change or paste. IF formChanged == true then I do not want the user to be able to click on a link, or perform a search until they have confirmed whether or not to save the data.

I am using the following to prompt the user:

    $(document).click(function(eve) {
    if (!$(eve.target).is('#form *')) {
       if (formChanged) { 
           if (confirm("Do you want to save the data or continue to edit?")) {
                   $('#form').submit();
                   return true;
               }
           else { return false; } //here I do not want to submit the form OR continue with the openForm() method;
       }
    }
});

The html markup (simplified) is like this:

<a href="/new">New Customer</a>
<a href="javascript:performSearch();">Search</a>
<table>
    <tr>
      <td onclick="openForm(1);">Customer One</td>
    </tr>
    <tr>
      <td onclick="openForm(2);">Customer Two</td>
    </tr>
    <tr>
        <td><form> //form gubbins loaded via ajax in here </form></td>
     <tr>
      <td onclick="openForm(2);">Customer Two</td>
    </tr>
</table>

The problem I am having is I can capture the confirmation logic, but the other functions like openForm & performSearch() still continue to execute.

Ideally I would like to ONLY run the functions / follow the URL if the user selects SAVE, and do nothing if the user pressed CANCEL.

The obvious solution is to put this logic in openForm and performSearch functions, but this is a grossly oversimplified example, as the real page has dozens of different functions which are shared on many pages and thus this is not really possible

Answer 1

You probably want something like this: Javascript - Confirmation when leaving page

Instead of the if(disabledConfirm_exit) return; in the last section of code, check the formChanged variable.

In jQuery - you can use this: http://api.jquery.com/unload/

Answer 2

Update

I don't know if there's a better pattern or some existing method that you might be able to use but until someone posts a better answer, here's what I have. You could write a delegating method that will be called everywhere and as arguments, will be given the function to be invoked and the arguments for that function. It can check if the form has been changed - if not, it will invoke the appropriate function otherwise it'll prompt the user. Something like this:

<a href="/new">New Customer</a>
<a href="javascript:check(performSearch);">Search</a>
<table>
    <tr>
      <td onclick="check(openForm,1);">Customer One</td>
    </tr>
    <tr>
      <td onclick="check(openForm, 2);">Customer Two</td>
    </tr>
    <tr>
        <td><form> //form gubbins loaded via ajax in here </form></td>
     <tr>
      <td onclick="check(openForm, 2);">Customer Two</td>
    </tr>
</table>

The check function could look like this (in it's current form it's really simplistic and only works with one argument for the function that will be invoked but it could be made more generic):

function check(func, param){
    if (!formChanged){
        func(param); //invoke the original function 
    }
    else{
      //handle the case for a modified form that the user wants to leave
    }
}

You could probably do this much cleaner fashion if you attached your event handlers via JavaScript rather than specifying them in the HTML - the tenet of unobtrusive JavaScript of separating the markup from the behaviour

---

It sounds like you're looking for window.onbeforeunload