title: jQuery: Form Submission - Multiple Event Handlers
body: <p>Currently having some issues with jQuery Form Submissions in my project.</p>
  
  <p>My project contains a general jQuery Code which prevents form double submissions (e.g. someone clicks the 'submit' button multiple times).</p>
  
  <pre><code>//prevent multiple form submissions
  jQuery.fn.preventDoubleSubmission = function () {
      $(document).on('submit', this, function (e) {
          let $form = $(this);
          if ($form.data('submitted') === true) {
              e.preventDefault();
          } else {
              $form.data('submitted', true);
          }
      });
      return this;
  };
  
  
  $(function () {
      $('form').preventDoubleSubmission();
  });
  </code></pre>
  
  <p>This code is included into every single page - so every form should be 'protected'.</p>
  
  <p>For some specific forms I need to check some values before they are submitted - and show a confirm box, if some values are missing (e.g. Are you sure you want to submit this form without value X?)</p>
  
  <p>Here's the code:</p>
  
  <pre><code>$(document).on('submit', 'form[name="article"]', function (e) {
      e.preventDefault();
      let form = this;
      let $form = $(form);
      let $category = $form.find('select#article_category'); //get category
  
      if ($category.length &amp;&amp; !$category.val()) { //check if category is selected
          $.confirm({ //jquery confirm plugin
              title: "Are you sure?",
              content: "Value X is missing - continue?",
              buttons: {
                  confirm: {
                      action: function () {
                          $form.off('submit');
                          form.submit();
                      }
                  }
              }
          });
      } else {
          $form.off('submit');
          form.submit();
      }
  });
  </code></pre>
  
  <p>So basically, if the user tries to submit the form, but the value X is missing, there will be a Yes/No Popup first - if the value exists, the form will be submitted right away.</p>
  
  <p><strong>Problem:</strong>
  When I want to submit the form, I call <code>$form.off('submit');</code> to remove the event handler and submit afterwards with <code>form.submit();</code>. Sadly this also removes my <em>preventDoubleSubmission</em> event handler, which allows double submissions again.</p>
  
  <p>Is there a way to fix my issue? Thanks</p>