Javascript alert when leaving multiple page form

First of all, I'd like to say thank you for making Gravity Forms. I've been using it for more than a year, and can honestly say it is one of the best WordPress plugins.

Here's an issue I'd be grateful to have some insight on:

I'm building a multiple page form. I would like to have a javascript alert to confirm that a user would like to leave the form page before submitting the form. This alert would need to display when the user closes the browser tab, clicks on a link to go to another page within the same tab, closes their browser application, etc. In other words, I just want to ask the user "Are you sure you want to leave this page before submitting the form?"

I'm no expert when it comes to javascript, but I've done a bit of Googling/RTFM'ing on this subject, and have come across quite a few example code snippets, such as:

http://www.openjs.com/scripts/events/exit_confirmation.php

I want to double check that using the above javascript (or something similar) will not conflict with any javascript that the Gravity Forms plugin is running. My Wordpress site's theme is Thesis, so it's trivial to paste in some javascript specifically for the form page.

Is there a better way to do this type of alert, as opposed to the script I linked to above? I know jQuery is great for cross browser compatibility, but I don't want to run into any conflicts with Gravity's js...

Thanks in advance for your help and advice.

Thank you for your reply, Carl.

Unfortunately, I haven't had any luck with the script I linked to above. I did try another script (the jQuery script below), which seems to work fine in Safari, but doesn't work at all in Firefox, Opera, or IE.

<script type="text/javascript">
	$('#reload').click(function() {
	 	location.reload();
	});
	$(window).bind('beforeunload', function(){
		return '>>>>>Before You Go<<<<<<<< \n Your custom message go here';
	});
</script>

I'm stuck (from a code perspective), and would greatly appreciate some advice on moving forward with this challenge.

I think having this as a built-in form option in future releases would be very valuable. It's frustrating for a user to be half way done with a multi-page form and lose their data, because they accidentally clicked a link or closed the window/tab.

For what it's worth, I believe a nearly identical feature is already built in to the back end admin panel of Gravity Forms. When editing a form, a confirm dialog is displayed when trying to exit/refresh the page before hitting the "Update Form" button--but the confirm dialog is not displayed when the "Update Form" button has been submitted. This seems to be exactly what I'm trying to do, only on the front end...

Can you point me in the right direction on how I can make this work, please?

Thank you for your reply, Chris.

I'll be glad to provide a link to the form for support purposes. Some of the questions on the form are proprietary, though, so I have the forms on password protected pages.

Would it be possible to send a link and login information to you via email?

Hi Chris,

I just wanted to make sure you received my email on Monday, and that you were able to access the forms.

Thanks.

Thank you for your help, Chris. I've added the code from your last forum post into a Wordpress page containing a test form, which is a single page. The script generates the following alert message when I use Safari:

"Are you sure you want to reload this page? You have entered text on this form. If you reload the page, your changes will be lost. Do you want to reload the page anyway?"
The alert has options to either cancel or reload.

That's exactly what I was hoping for. But in Safari, the alert message is only being displayed some of the time. I've played around with the test form quite a bit, and most of the time the alert will be displayed if two or more fields are filled in. But some times it won't display the alert when it should.

I looked at the error console in the Safari web inspector, and it's displaying two errors:

ReferenceError: Can't find variable: jQuery
Failed to load resource: Could not connect to the server.

The script you posted isn't working at all in Firefox or Opera on OSX. I can reload the page or close the tab without any alert message being displayed at all, even if all of the questions on the test form are filled out. I've also loaded the test form in Windows XP, using Firefox and IE8, and wasn't able to get the alert message to display in those browsers.

The error console for Opera displays one error (which appears to be the same error as is being displayed in Safari's console):

Uncaught exception: ReferenceError: Undefined variable: jQuery

So, I feel like we're close to getting this issue worked out, but the previously mentioned errors in the script are preventing it from working as we intended. I'm hopeful that if we debug these errors, the script will work--at least on a single page form.

The link to the test form is below, if you'd like to take a look at it:

All Flooring Inspections

You can use the same login information I sent to you via email to access the above test form.

I also looked at the gform_page_loaded hook that you mentioned in your last post. Can you explain how I should include that in the multi-page forms where I need the alert to show up, please?

Thanks again for your help!

I want to follow up again on this conversation, because I never got a response to my last two posts.

Is this an issue you can provide support on?