フォームに入力した時のみ画面遷移時にアラート表示する方法2


HTML

<form action="index2.html" method="get">
  <input type="text">
  <input type="checkbox">
  <input type="radio">
  <select>
    <option value="foo">foo</option>
    <option value="bar">bar</option>
  </select>
  <hr>
  <input type="submit" value="送信">
</form>

JavaScript

var submitBtn = document.querySelector('input[type="submit"]');
var onBeforeunloadHandler = function(e) {
  var msg = 'このページから移動すると入力フォームの内容が消えます。';
  e.returnValue = msg;
};
window.addEventListener('beforeunload', onBeforeunloadHandler);
submitBtn.addEventListener('click', function() {
  window.removeEventListener('beforeunload', onBeforeunloadHandler);
});