0

I am trying to figure out how to limit the beforeunload command on my form. I have been able to figure out how to unbind the beforeunload command and then when I go to navigate away from the form this works. However, the unload happens every time regardless of whether or not the form was changed. I'm trying to figure out how to get the beforeunload to only fire if the form was actually updated or changed. If the user clicks the back button on the browser, the beforeunload does not fire. This is perfect. However, if the user clicks on a link on the "form" it pops up the beforeunload prompt. Is this as designed? Perhaps I should be approaching this differently? I'm a newbie..so I'm open to suggestions.

I have read through the MDN link that explains beforeunload...https://developer.mozilla.org/en-US/docs/Web/Events/beforeunload and can't seem to figure out how to narrow down the beforeunload to only if a field on the form has been changed.

   $('form').submit(function() {
   $(window).unbind('beforeunload');
    });
   $(window).on('beforeunload',function(){
   return '';
    });

I am trying to figure out how to alter the code above so that the beforeunload only fires if a field on my form changes when the user goes to navigate away from this page. It's confusing for the user if there is a pop up asking if they want to navigate away from the page if nothing has been clicked or changed.

Steve Smith
  • 1,019
  • 3
  • 16
  • 38
  • Silly question Steve, but just test the form state for change, in the `beforeunload` and only show your message if it has changed. No need to remove the event? – Bibberty Jan 12 '19 at 01:37

1 Answers1

2

Something like this. We check out simple form and only prompt user if there is a value.

Added variable set when submitting, this allows us to bypass our onunload tests.

var submitting = false;

window.addEventListener("beforeunload", function (event) {
  console.log('checking form');
  
  let inputValue = document.querySelector('#myInput').value;
  if(inputValue.length > 0 && submitting === false) {
    console.log(inputValue);
    event.returnValue = 'Are you sure you wish to leave?';
  }
  
  event.preventDefault();
  
});

document.addEventListener("submit", function(event) { 
  submitting = true;
});
<form submit="somewhere.htm">
  <input id="myInput" type="text" />
  <input type="submit" value="Submit">
</form>
<a href="www.google.com">Test navigate away</a>
Bibberty
  • 4,670
  • 2
  • 8
  • 23
  • How can I get Submit to bypass this code? I've been playing with it all afternoon and can't get it to bypass this code when the user clicks submit and all of the fields are in fact populated. – Steve Smith Jan 12 '19 at 23:29
  • Can I removeEvent listener on form submit? $('form').submit(function() { window.removeEventListener("beforeunload",); }); I tried this, but perhaps my syntax is not correct. – Steve Smith Jan 12 '19 at 23:41
  • Steve, I think you want to warn the user if they have completed the fields, correct? – Bibberty Jan 12 '19 at 23:44
  • You don't 'bypass' the code itself. You simply control the test to only alert the user if they have entered values. Where I did `if(inputValue.length > 0)` you need to put more tests, to check all your controls. Make sense? – Bibberty Jan 12 '19 at 23:45
  • I want to warn the users if they have incompleted fields...and I want to warn them if they are trying to navigate away from the page if they have started to populate it... – Steve Smith Jan 12 '19 at 23:45
  • Yes makes sense. I'll play with the logic a bit more. – Steve Smith Jan 12 '19 at 23:46
  • Gotcha. Two different checks there. You want to do a submit validation, for values that may have been missed. Suggest that you also set a flag `var submitting = true;` and test for that in you unload code. – Bibberty Jan 12 '19 at 23:47
  • I already have the checks for field values. The only problem right now is turning off the addeventlistener when the form has been filled out properly and the user clicks on submit. – Steve Smith Jan 12 '19 at 23:49
  • Ok, give me a min. – Bibberty Jan 12 '19 at 23:53
  • I have edited it to reflect what I was suggesting, note we set a submitting flag. Obviously you will want to set that flag when you complete validation of you form on submit. If use is submitting and fails form validation, you should cancel in the submit event, this will stop the onunload. – Bibberty Jan 13 '19 at 00:00
  • Thank you so much for your help. Will work on this solution. This is generally what I thought. Additional logic and variable to turn on or off the solution. Thank you. – Steve Smith Jan 13 '19 at 00:02