Question

Popup if someone attempts to Close form before submission

Forms Web Customizations How To

Updated September 6, 2023

asked on January 8, 2021

Hi, we are looking for some JS to provide a popup if someone attempts to close a form (by mistake) before submitting the form such as in the example below. I've done some research and have found the event window.onbeforeunload but the challenge is this also is triggered when you submit the form which is not what we want.

Any of the coding gurus out there looked into this before

Thanks

@SteveKnowlton

@████████

0 0

Answer

SELECTED ANSWER

replied on January 8, 2021

I've only done a little bit of testing on this, but maybe it'll point you in the right direction.

This keeps a variable to track whether or not to give the warning. If the user is submitting/approving/rejecting the form (and it has no validation errors), then the variable is set to true and the warning doesn't show. Otherwise, the warning does show.

var canLeaveForm = false;

$(document).ready(function () {
  
  $('.form-q').change(function(){
    canLeaveForm = false;
  });
  
  window.onbeforeunload = function() 
  {
    if (!canLeaveForm)
    {
      return 'Are you sure you want to leave this page without saving changes?';
    }
    else
    {
      return;
    }
  }

  $('.action-btn').on('click', function() {
    var noErrors = true;
    $('#form1').parsley().validate();
    $('.parsley-error').each(function() {
      noErrors = false;
    });
    if (noErrors) {
      canLeaveForm = true;
    } 
  }); 
  
});

5 0

replied on September 6, 2023

Does this work in Forms Designer 11?

0 0

replied on September 6, 2023

It should still work in the Classic Designer in version 11.

But the Modern designer is structured differently, so this code wouldn't work there. Additionally, I'm not certain we could re-write the code to make it work the same way in the Modern Designer because that code runs in a sandboxed iFrame and can only interact with the form via the LFForm interface, and at least currently, that interface doesn't have any way to monitor for the action button events.

0 0

Replies

replied on January 10, 2021 • Show version history

Hi Matt

This is fantastic, Thanks so much for jumping in.

I have completed some testing and found the following behavior which is acceptable.

1. If the user interacts with the form after launch (enters data, etc) then if they choose to close the form, the popup will appear giving them the chance to return to the form. If there was no interaction with the form it just closes the page.

When the popup appears it does not include the message as constructed in the code, but instead displays the browsers default message "Leave site" as the example above shows

2. The Submit button appeared to work normally and there was no popup generated at time of original submission or in a User Task action Button selection (Submit, Approve and Reject) including when the form had data changes in the User Task.

3. When the User selects the Save as Draft button, it functions normally, but when the task was closed using the close button, they are presented the Leave Popup

All the best

Steve

3 0

replied on January 11, 2021

So glad to hear it and very happy to be helpful.

0 0

replied on January 11, 2021

Yep. That's a good way to do it. FYI, the only time that we've found that something like this doesn't work is if they left the form open long enough that the web session timed out. We've had users who start filling out a complex form with dozens of data elements, and then just walk away for several hours or a day. When they come back, the session is timed out, and there's nothing to resume.

1 0

You are not allowed to follow up in this post.

Question

Question

Popup if someone attempts to Close form before submission

Answer

Replies

Sign in to reply to this post.