4

I have a pop-up that loads a form. Currently the user can double click the submit button on the form which results in multiple submissions. This can cause some serious issues depending on the purpose of the form.

Any suggestions on the best way to block double click of submit buttons on forms loaded within pop-ups?

  • Most forms should already be preventing this - can you elaborate on what sort of form this is, perhaps with a screenshot? Of course, the generic solution is to disable the button by Javascript after it's pressed once, but if there are forms that have this issue in Civi we should get it fixed in core. – Jon G - Megaphone Tech Oct 31 '18 at 19:02
  • 1
    This is a custom form created for an extension (using Civi's standard for forms). I ended up using Javascript to block it. However, should it be blocking double clicks by default? Or is it different because I created the quickform? – Sleewok Oct 31 '18 at 19:30
2

I was able to disable double submission of the form by adding the following to the bottom of the form's TPL file:

{literal}
  <script type="text/javascript">
    // PREVENT DOUBLE SUBMISSION OF FORM
    CRM.$(function ($) {
      $(document).ready(function () {
        $('form').preventDoubleSubmission();  //block double submission of form
      });

      // jQuery plugin to prevent double submission of forms
      $.fn.preventDoubleSubmission = function () {
        CRM.$(this).on('submit', function (e) {
          var $form = $(this);

          if ($form.data('submitted') === true) {
            // Previously submitted - don't submit again
            console.log("Form Previously submitted - don't submit again");
            e.preventDefault();
          } else {
            // Mark it so that the next submit can be ignored
            console.log("Form NOT Previously submitted");
            $form.data('submitted', true);
          }
        });

        // Keep chainability
        return this;
      };
    });
  </script>
{/literal}

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service, privacy policy and cookie policy

Not the answer you're looking for? Browse other questions tagged or ask your own question.