Warning When Leaving Unsubmitted Form

[mgoldsm7]

I am trying to figure out how to implement a message if the user attempts to leave the webpage before submitting one specific form on my site.

This code appears to work, but it executes on EVERY quform page, which I do not want.

$(window).on(“beforeunload”, function() {
return “Are you sure? You didn’t finish the form!”;
});

$(document).ready(function() {
$(“#quform-form-146d47”).on(“submit”, function(e) {
$(window).off(“beforeunload”);
return true;
});
});

Any insight would be extremely appreciated!

Thank you.

[katw]

Hi @mgoldsm7,

Thought I may be able to give you some ideas to try:

If the form you want completed resides on particular page you could check the URL before you attach the event to “nag them”.

That way you would only run the “exit check” on the page that matters.

var current_url = location.href;

This returns the full url with all parameters, so to focus on the page name you need to isolate the page name from the querystring like so:

var url = location.href;
var url_bits = url.split(‘?’);
var main_part = url_bits[0];

In your (document).ready function you would get the page name then test if page equalled the page that matters then run/attach the on submit event.

$(document).ready(function() {

// INSERT CODE TO GET URL - What page am I on?

// INSERT CODE TO TEST IF (PAGE == 'important_form') { 

$(“#quform-form-146d47”).on(“submit”, function(e) {
$(window).off(“beforeunload”);
return true;
});

// INSERT END IF
});

If the page name is known by a number of names (aliases) you would need a list of aliases to test against. Method would work but IF would be checking against an array of names and/or checking query string too.

• This reply was modified 7 years ago by katw. Reason: fixed typo

[Ally]

You don't have permission to view this content. Please log in or register and then verify your purchases to gain access.

[mgoldsm7]

Thank you, Ally and katw!

I was able to get it working with the following code:

jQuery(function ($) {
if (location.href == ‘http://mywebsite.com/query-form/’) {
$(document).ready(function() {
formmodified=0;
$(‘form *’).change(function(){
formmodified=1;
});
window.onbeforeunload = confirmExit;
function confirmExit() {
if (formmodified == 1) {
return “New information not saved. Do you wish to leave the page?”;
}
}
$(“.quform-button-submit”).click(function() {
formmodified = 0;
});
});
}
});

[Author]

Posts