title: Show alert when leaving form except for submit button
body: <p>I am using the following code to perform a check if a form has been altered when trying to leave the form and show an alert if necessary.
  Unfortunately I have not yet figured out how to avoid the alert when clicking the submit button.</p>
  
  <pre><code>    &lt;script src="//ajax.googleapis.com/ajax/libs/jquery/1/jquery.min.js"&gt;&lt;/script&gt;
  
      &lt;script&gt;
      $('#formrf').data('serialize',$('#formrf').serialize());
        // On load save form current state
  
  $(window).bind('beforeunload', function(e){
          $('#formrf').bind('submit', function () {
          $(window).unbind('beforeunload');
      });
      if($('#formrf').serialize()!=$('#formrf').data('serialize'))return true;
      else e=null;
      // i.e; if form state change show box not.
  });
  
  window.onbeforeunload = function (e) {
  if (!change)
      {
      return;
      }
  
  
      var message = "Die eingegebenen Formulardaten werden aus Sicherheitsgründen nicht gespeichert und gehen beim Verlassen des Formulars verloren! Sind Sie sicher, dass Sie die Formularseite verlassen möchten?";
  
      var e = e || window.event;
  
      // For IE and Firefox prior to version 4
      if (e) {
          e.returnValue = message;
      }
  
      // For Safari
      return message;
  };
  &lt;/script&gt;
  </code></pre>
  
  <p>Thx for your help in advance! Kind regards</p>
  
  <p>there is the html</p>
  
  <pre><code>&lt;!DOCTYPE html&gt;
  &lt;!--
  
  [if lt IE 8]&gt;      &lt;html class="no-js lt-ie10 lt-i…
  
  --&gt;
  &lt;!--
  
  [if IE 8]&gt;         &lt;html class="no-js lt-ie10 lt-i…
  
  --&gt;
  &lt;!--
  
  [if IE 9]&gt;         &lt;html class="no-js lt-ie10" lan…
  
  --&gt;
  &lt;!--
  
  [if gt IE 9]&gt;&lt;!
  
  --&gt;
  &lt;html class=" js flexbox canvas canvastext webgl no-touch geolocation pos… webworkers applicationcache svg inlinesvg smil svgclippaths" lang="de" style="" slick-uniqueid="3"&gt;
      &lt;!--
  
      &lt;![endif]
  
      --&gt;
      &lt;head&gt;&lt;/head&gt;
      &lt;body id="top" class="win firefox gecko fx31 vision-sidebar-right"&gt;
          &lt;div&gt;&lt;/div&gt;
          &lt;div id="nav-bg-sub"&gt;&lt;/div&gt;
          &lt;div id="nav-bg"&gt;&lt;/div&gt;
          &lt;header&gt;&lt;/header&gt;
          &lt;!--
  
          [if lte IE 8]&gt;
                  &lt;div class="warning-div" style="w…
  
          --&gt;
          &lt;section id="image-main"&gt;&lt;/section&gt;
          &lt;div id="wrapper"&gt;
              &lt;section id="content" role="main"&gt;
                  &lt;div id="rechtsfrage-stellen" class="mod_article first last block"&gt;
                      &lt;div class="ce_text first block"&gt;&lt;/div&gt;
                      &lt;!--
  
                       indexer::stop 
  
                      --&gt;
                      &lt;div class="ce_form tableless block"&gt;
                          &lt;form id="formrf" class="multipage form_page_1" enctype="multipart/form-data" method="post" action="rechtsfrage-stellen.html"&gt;
                              &lt;div class="formbody"&gt;
                                  &lt;input type="hidden" value="auto_form_3" name="FORM_SUBMIT"&gt;&lt;/input&gt;
                                  &lt;input type="hidden" value="404f60896c17b4540d203becf8193ca0" name="REQUEST_TOKEN"&gt;&lt;/input&gt;
                                  &lt;input type="hidden" value="12582912" name="MAX_FILE_SIZE"&gt;&lt;/input&gt;
                                  &lt;input type="hidden" value="1" name="FORM_PAGE"&gt;&lt;/input&gt;
                                  &lt;input type="hidden" value="" name="Rechtsfrage_form"&gt;&lt;/input&gt;
                                  &lt;input type="hidden" value="" name="Kundennummer"&gt;&lt;/input&gt;
                                  &lt;input type="hidden" value="" name="Mandatsnummer"&gt;&lt;/input&gt;
                                  &lt;input type="hidden" value="" name="AGB-Version"&gt;&lt;/input&gt;
                                  &lt;div class="steps_wrap"&gt;&lt;/div&gt;
                                  &lt;div class="steps_wrap"&gt;&lt;/div&gt;
                                  &lt;div class="steps_wrap"&gt;&lt;/div&gt;
                                  &lt;div class="headline"&gt;&lt;/div&gt;
                                  &lt;div class="explanation"&gt;&lt;/div&gt;
                                  &lt;div id="leftie"&gt;
                                      &lt;p&gt;&lt;/p&gt;
                                      &lt;p&gt;&lt;/p&gt;
                                      &lt;p&gt;&lt;/p&gt;
                                      &lt;p&gt;&lt;/p&gt;
                                      &lt;p&gt;&lt;/p&gt;
                                      &lt;p&gt;&lt;/p&gt;
                                      &lt;p&gt;&lt;/p&gt;
                                      &lt;p&gt;&lt;/p&gt;
                                      &lt;div class="explanation" style="display: inline-block; width: 76%; margin-bottom: 0px;"&gt;&lt;/div&gt;
                                      &lt;p&gt;&lt;/p&gt;
                                  &lt;/div&gt;
                                  &lt;!--
  
                                   indexer::stop 
  
                                  --&gt;
                                  &lt;div class="submit_container form_page"&gt;&lt;/div&gt;
                                  &lt;!--
  
                                   indexer::continue 
  
                                  --&gt;
                                  &lt;script&gt;&lt;/script&gt;
                                  &lt;script&gt;&lt;/script&gt;
                              &lt;/div&gt;
                          &lt;/form&gt;
                      &lt;/div&gt;
                      &lt;!--
  
                       indexer::continue 
  
                      --&gt;
                  &lt;/div&gt;
                  &lt;a class="top" href="rechtsfrage-stellen.html#top" title="Top"&gt;&lt;/a&gt;
              &lt;/section&gt;
              &lt;aside id="sidebar-secondary" class="sidebar"&gt;&lt;/aside&gt;
          &lt;/div&gt;
          &lt;footer&gt;&lt;/footer&gt;
          &lt;script src="files/vision/js/script.js"&gt;&lt;/script&gt;
          &lt;script src="//ajax.googleapis.com/ajax/libs/jquery/1/jquery.min.js"&gt;&lt;/script&gt;
          &lt;script&gt;&lt;/script&gt;
          &lt;script src="http://ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js"&gt;&lt;/script&gt;
          &lt;script&gt;&lt;/script&gt;
          &lt;script src="assets/swipe/2.0/js/swipe.min.js"&gt;&lt;/script&gt;
          &lt;script&gt;&lt;/script&gt;
          &lt;script src="http://ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js"&gt;&lt;/script&gt;
          &lt;script&gt;&lt;/script&gt;
          &lt;script src="assets/jquery/colorbox/1.4.31/js/colorbox.min.js"&gt;&lt;/script&gt;
          &lt;script&gt;&lt;/script&gt;
          &lt;script src="http://ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js"&gt;&lt;/script&gt;
          &lt;script&gt;&lt;/script&gt;
          &lt;script src="assets/js/placeholders.min.js"&gt;&lt;/script&gt;
          &lt;script&gt;&lt;/script&gt;
          &lt;script src="//ajax.googleapis.com/ajax/libs/jquery/1/jquery.min.js"&gt;&lt;/script&gt;
          &lt;script&gt;&lt;/script&gt;
          &lt;script&gt;&lt;/script&gt;
          &lt;div id="cboxOverlay" style="display: none;"&gt;&lt;/div&gt;
          &lt;div id="colorbox" class="" role="dialog" tabindex="-1" style="display: none;"&gt;&lt;/div&gt;
      &lt;/body&gt;
  &lt;/html&gt;
  </code></pre>
  
  <p>does that help?</p>