Warning When Leaving Unsubmitted Form

Home Forums Quform WordPress Warning When Leaving Unsubmitted Form

This topic is: resolved
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 5 years, 10 months 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.
Be inspired. © 2024 ThemeCatcher Ltd. 20-22 Wenlock Road, London, England, N1 7GU | Company No. 08120384 | Built with React | Privacy Policy