Warning When Leaving Unsubmitted Form

Home Forums Quform WordPress Warning When Leaving Unsubmitted Form

This topic is: resolved

This topic contains 3 replies, has 3 voices, and was last updated by  mgoldsm7 3 months ago.

Viewing 4 posts - 1 through 4 (of 4 total)
  • Author
    Posts
  • #25592

    mgoldsm7
    Participant

    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.

    #25608

    katw
    Participant

    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 3 months, 1 week ago by  katw. Reason: fixed typo
    #25645

    Ally
    Support Staff

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

    #25711

    mgoldsm7
    Participant

    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;
    });
    });
    }
    });

Viewing 4 posts - 1 through 4 (of 4 total)

You must be logged in to reply to this topic.