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

Answer 1

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 2

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>

Answer 3

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