Disable AddEventListener On Submit

Question

I am trying to disable the function I pass to addEventListener when the user clicks on submit. I put code in to prevent user from leaving page if they have entered data on any of the fields. This works fine. If the user tries to navigate away they get a warning as expected. However, I can't seem to figure out how to disable this feature once all of the fields are populated and the user clicks submit. As it stands, they are prompted to make sure they want to navigate away when they click on submit and I don't want this to happen when the user clicks submit.

I've tried something like the below, to try to unbind the beforeunload function based on submit, but this isn't working. I feel like this is the right general idea, but I'm struggling to make this work as I want it to.

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

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

The code below works as expected:

window.addEventListener('beforeunload', function (event) {
  console.log('checking form');

  let inputValue = document.querySelector('#myInput').value;

  if (inputValue.length > 0) {
    console.log(inputValue);
    event.returnValue = 'Are you sure you wish to leave?';
  }

  event.preventDefault();
});

If the user clicks submit I want the beforeunload function to be turned off essentially.

Answer 1

Was able to solve this problem using the suggestion that was made by Bipperty via this SO issue...Narrow Down BeforeUnload To Only Fire If Field Is Changed or Updated. Ultimately the code below is what I used to turn off beforeunload when submitting the form....

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

Answer 2

If you bind a handler using .on() you can remove the bound event using .off()

$('form').submit(function() {
  $(window).off('beforeunload');
});

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

However, I feel in your scenario you don't really need the beforeunload at all if you handle your form submit logically.

I've mocked up an example of how you can logically submit the form if a user chooses to submit the form based on a condition (in this case if all fields aren't filled).

$('form').on('submit', function (e) {
  var inputs = $(':text', this);
  console.log(inputs.length)
  var validInputs = inputs.filter(function () {
    return $(this).val().length;
  }).length;
  if (validInputs > 0 && validInputs < inputs.length) {
    var r = confirm("Are you sure you want to leave?");
    if (!r) e.preventDefault()
  }
})

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>

<form action="http://google.com" method="get">
  <input name="a" placeholder="Input 1">
  <input name="b" placeholder="Input 2">
  <input name="c" placeholder="Input 3">
  <button type="submit">Submit</button>
</form>

Answer 3

Update

To prompt the user before leaving a form:

window.onbeforeunload = function(){
  return 'Are you sure you want to leave?';
};

^{See this post}

---

Use the required attribute on each field and you won't need to do all of that. The following demo will refuse any attempts to submit it's form if there's a blank field. It will send to a live test server and a response will be displayed verifying a successful submission.

Demo

window.onbeforeunload = function(){
  return 'Are you sure you want to leave?';
};

label {
  display: inline-block;
  width: 75px
}

[type=submit] {
  margin-left: 200px
}

<form id='form' action='http://httpbin.org/post' method='post' target='response'>


  <label>Name: </label><input name='Name' type='text' required><br>
  <label>Cell: </label><input name='Cell' type='tel' required><br>
  <label>Date: </label><input name='Date' type='date' required><br>

  <input type="submit">


</form>
<iframe src='about:blank' name='response'></iframe>