https://legacy.forums.gravityhelp.com/topic/javascript-alert-when-leaving-multiple-page-form Gravity Support Forums Topic: Javascript alert when leaving multiple page form en-US Mon, 20 Apr 2026 10:03:47 +0000 http://bbpress.org/?v=1.0.1 q https://legacy.forums.gravityhelp.com/search.php https://legacy.forums.gravityhelp.com/topic/javascript-alert-when-leaving-multiple-page-form#post-48723 Wed, 08 Feb 2012 14:04:35 +0000 greg 48723@https://legacy.forums.gravityhelp.com/ <p>I want to follow up again on this conversation, because I never got a response to my last two posts. </p> <p>Is this an issue you can provide support on? </p> https://legacy.forums.gravityhelp.com/topic/javascript-alert-when-leaving-multiple-page-form#post-45448 Wed, 04 Jan 2012 15:12:26 +0000 greg 45448@https://legacy.forums.gravityhelp.com/ <p>It's been a couple of weeks since my last post. I realize everyone was busy over the holiday season, but I'm curious if you guys have any additional information on resolving this issue. Any ideas, help, or advice would be appreciated.</p> <p>Thanks. </p> https://legacy.forums.gravityhelp.com/topic/javascript-alert-when-leaving-multiple-page-form#post-44263 Fri, 16 Dec 2011 17:07:39 +0000 greg 44263@https://legacy.forums.gravityhelp.com/ <p>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:</p> <p>"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?"<br /> The alert has options to either cancel or reload.</p> <p>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. </p> <p>I looked at the error console in the Safari web inspector, and it's displaying two errors:</p> <p>ReferenceError: Can't find variable: jQuery<br /> Failed to load resource: Could not connect to the server. </p> <p>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.</p> <p>The error console for Opera displays one error (which appears to be the same error as is being displayed in Safari's console):</p> <p>Uncaught exception: ReferenceError: Undefined variable: jQuery</p> <p>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. </p> <p>The link to the test form is below, if you'd like to take a look at it: </p> <p><a href="http://www.afinspect.com/test-form/" rel="nofollow">All Flooring Inspections</a></p> <p>You can use the same login information I sent to you via email to access the above test form.</p> <p>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?</p> <p>Thanks again for your help! </p> https://legacy.forums.gravityhelp.com/topic/javascript-alert-when-leaving-multiple-page-form#post-43688 Sun, 11 Dec 2011 01:29:24 +0000 Chris Hajer 43688@https://legacy.forums.gravityhelp.com/ <p>Greg, you asked earlier how Gravity Forms does it in the form editor. Here's the code for that:</p> <pre><code>[js] jQuery(document).ready(function() { gforms_original_json = jQuery.toJSON(form); window.onbeforeunload = function(){ UpdateFormObject(); if (gforms_original_json != jQuery.toJSON(form)){ return &quot;You have unsaved changes.&quot;; } } });</code></pre> <p>This is present in the plugin in js/form_editor.js. It checks to see if the original JSON is the same as what is currently present in the page (i.e. if there were any changes in the editor) and if there were, pop up the dialog that says "You have unsaved changes." on line one, and the browser default message on line 2.</p> <p>I believe that code will work for you (with modifications maybe), but you need to have that code present on all pages of a multi-page form? For that, you can use the <a href="http://www.gravityhelp.com/documentation/page/Gform_page_loaded" rel="nofollow">gform_page_loaded</a> hook. </p> <p>You also mentioned that it was only working in Safari. Can you explain what happens in the other browsers, or post a link to a form online where you have implemented this, so we can check it for errors? You can email me again if you like <a href="mailto:chris@rocketgenius.com">chris@rocketgenius.com</a> - thanks. </p> https://legacy.forums.gravityhelp.com/topic/javascript-alert-when-leaving-multiple-page-form#post-43326 Wed, 07 Dec 2011 13:08:11 +0000 greg 43326@https://legacy.forums.gravityhelp.com/ <p>Hi Chris,</p> <p>I just wanted to make sure you received my email on Monday, and that you were able to access the forms.</p> <p>Thanks. </p> https://legacy.forums.gravityhelp.com/topic/javascript-alert-when-leaving-multiple-page-form#post-43155 Mon, 05 Dec 2011 16:46:58 +0000 Chris Hajer 43155@https://legacy.forums.gravityhelp.com/ <p>Sure, please sent an email to <a href="mailto:chris@rocketgenius.com">chris@rocketgenius.com</a> and I will take a look. </p> https://legacy.forums.gravityhelp.com/topic/javascript-alert-when-leaving-multiple-page-form#post-43139 Mon, 05 Dec 2011 13:47:43 +0000 greg 43139@https://legacy.forums.gravityhelp.com/ <p>Thank you for your reply, Chris.</p> <p>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. </p> <p>Would it be possible to send a link and login information to you via email? </p> https://legacy.forums.gravityhelp.com/topic/javascript-alert-when-leaving-multiple-page-form#post-43066 Sun, 04 Dec 2011 16:07:21 +0000 Chris Hajer 43066@https://legacy.forums.gravityhelp.com/ <p>Can you post a link to your form please so we can see what's going on? Thank you. </p> https://legacy.forums.gravityhelp.com/topic/javascript-alert-when-leaving-multiple-page-form#post-42893 Fri, 02 Dec 2011 14:39:44 +0000 greg 42893@https://legacy.forums.gravityhelp.com/ <p>Thank you for your reply, Carl.</p> <p>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.</p> <pre><code>&lt;script type=&quot;text/javascript&quot;&gt; $(&#39;#reload&#39;).click(function() { location.reload(); }); $(window).bind(&#39;beforeunload&#39;, function(){ return &#39;&gt;&gt;&gt;&gt;&gt;Before You Go&lt;&lt;&lt;&lt;&lt;&lt;&lt;&lt; \n Your custom message go here&#39;; }); &lt;/script&gt;</code></pre> <p>I'm stuck (from a code perspective), and would greatly appreciate some advice on moving forward with this challenge.</p> <p>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.</p> <p>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...</p> <p>Can you point me in the right direction on how I can make this work, please? </p> https://legacy.forums.gravityhelp.com/topic/javascript-alert-when-leaving-multiple-page-form#post-42774 Thu, 01 Dec 2011 17:05:23 +0000 Carl Hancock 42774@https://legacy.forums.gravityhelp.com/ <p>You should be able to use standard javascript or jQuery to accomplish this. Gravity Forms outputs standard HTML so customizations can be implemented using jQuery. So this should be doable.</p> <p>I would suggest playing around with it on a test form or a test site and see if you can get it to work. It certainly can't hurt to experiment and try.</p> <p>What you describe may make a good built in feature as a form option. If a user has started filling out a form and then tries to navigate away without submitting it, display this type of alert. I'll note this feature idea for future reference. </p>