You are viewing limited content. For full access, please sign in.

Question

Question

Popup if someone attempts to Close form before submission

asked on January 8

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

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

Replies

replied on January 10 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

2 0
replied on January 11

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

0 0
replied on January 11

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.

Sign in to reply to this post.