CiviCRM Community Forums (archive)

We have some multi-stage/multi-page webforms. The first stage gathers first name, last name and e-mail and creates a contact. The later stages gather more detailed information about the contact and how they would like to help.

When the submit button on the first stage webform is clicked multiple times in quick succession, multiple (duplicate) contacts are created. When we stop clicking, it proceeds to the next stage. When later stages are correctly completed and submitted once, only one of those contacts gets the extra details.

When the submit button on the first page of the third stage webform is clicked multiple times in quick succession, as with a single submission, the form proceeds to the next page.

When the submit button on a later page of the third stage webform is clicked multiple times in quick succession, we seem to repeat parts of that webform.

I have a jQuery fix, which disables the buttons on a form submit event. This does the job on the first stage form, which is the main thing, but it breaks the multi-page forms where there are Previous and Next buttons. Whether I disable Next or both on submit, it always goes back as if I clicked Previous, and I cannot proceed. I note that both are <input> tags of type="submit".

Disabling the submit button only if it is the only submit button (ie there is no Previous button) still does the job on the first stage form, but we want to also stop the problem where multiple clicking on a later page repeats part of that webform stage.

The jQuery as it stands is as follows:
    jQuery(document).ready(function() {
      jQuery('form').submit(function() {
        var submitbtn = jQuery('.form-submit');
        if (submitbtn.length == 1) {
          submitbtn.attr('disabled', 'disabled');
        }
      });
    });

TLDR: Is there a complete cross-browser way of blocking multiple clicks in quick succession on a multi-page webform?

Target the submit button's "click" event and disabling the button. This may have the undesired side-effect (as you noted) of changing the server response since disabled form elements submit different data than enabled ones, so the server might no longer be able to tell which button was clicked.

And the effect of blocking the corrected submission of the form if the user's first attempt is missing a required field. This was the first thing I tried.

Target the form's submit event and prevent it from happening twice, like so:

That code works perfectly for what we wanted, thanks.

Unless maybe the submissions are happening so quickly together that there's some sort of race condition going on.

That's exactly what we're going for. Double-clicking, fast repeated clicking by an impatient user etc.