Home › Forums › Quform WordPress › Warning When Leaving Unsubmitted Form
- This topic has 3 replies, 3 voices, and was last updated 5 years, 10 months ago by mgoldsm7.
- AuthorPosts
- May 9, 2018 at 4:17 pm #25592mgoldsm7Participant
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.
May 10, 2018 at 2:05 am #25608katwParticipantHi @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 5 years, 10 months ago by katw. Reason: fixed typo
May 11, 2018 at 2:02 pm #25645AllySupport StaffYou don't have permission to view this content. Please log in or register and then verify your purchases to gain access.
May 16, 2018 at 9:06 pm #25711mgoldsm7ParticipantThank 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;
});
});
}
}); - AuthorPosts
- You must be logged in to reply to this topic.