Prevent multiple clicks of submit order with jQuery 1.6+

uc_cart.js already contains multiple click prevention for the "Review order" page. Can you check to see if that file is included on your site? I guess it may be possible that your payment method stops this from working for some reason, I haven't checked this.

No further information provided.

TR-- Been trying to get in touch re the FedEx contract work you started for me. Could you please check your drupal messages/email/spam folder? Thank you! -ACB

uc_cart.js is supposed to clone the button, and then disable it; this works for me.

Do you have jQuery Update module installed? If so, which version of jQuery are you using?

I can confirm this in 3.6

@longwave If there's a specific jQuery version number dependency it should be noted on the project page

@dgtlmoon: The Ubercart JavaScript works with the version of jQuery that is distributed with Drupal 7. IF you have jQuery Update installed and you are using a version of jQuery that is newer than the Drupal 7 default, then you MAY find that many modules will have problems since the newer jQuery may not properly interpret the older scripts. That's a hazard of using jQuery Update. The only reason Ubercart would need to specify a dependency is if we required a newer version of jQuery that the default in Drupal 7.

@TR: Ahh great, yes that would make perfect sense! Thanks..

So the following code appears to be running fine, at the end I'm getting two buttons and the first one is not disabled,

Sidethought: perhaps this issue should be 'support other versions of jQuery?'

Just out of curiosity, why does the button need cloning? wouldn't it be enough to submit the form and disable it?

Drupal.behaviors.ucCart = {
  attach: function(context, settings) {
    // Add a throbber to the submit order button on the review order form.
    jQuery('form#uc-cart-checkout-review-form input#edit-submit').click(function() {
      jQuery(this).clone().insertAfter(this).attr('disabled', true).after('<span class="ubercart-throbber">&nbsp;&nbsp;&nbsp;&nbsp;</span>').end().hide();
      jQuery('#uc-cart-checkout-review-form #edit-back').attr('disabled', true);
    });
  }
}

HTML becomes..

<div class="form-actions form-wrapper" id="edit-actions">
<input type="submit" id="edit-back" name="op" value="Back" class="form-submit" disabled="disabled">
<input type="submit" id="edit-submit" name="op" value="Submit order" class="form-submit">
<input type="submit" id="edit-submit" name="op" value="Submit order" class="form-submit" disabled="disabled" style="display: none;">
<span class="ubercart-throbber">&nbsp;&nbsp;&nbsp;&nbsp;</span></div>

It looks like in jQuery 1.6 and above we should use .prop() instead of .attr(), but we also need to retain backward compatibility with non-jQuery Update users. As always, patches are welcome.

I seem to remember the button needs cloning, because if you disable it during the click event, the form never gets submitted; so we hide the original and display a disabled clone instead.

Given the popularity of jQuery Update, and the impact of this issue (multiple transactions do occur) I think it's reasonable to increase the priority of this issue

How about this approach? using .data() seems well supported and is quite commonly used in this situation

Tested with jQuery 1.5, 1.7 and 1.8

Drupal.behaviors.ucCart = {
  attach: function(context, settings) {
    // Add a throbber to the submit order button on the review order form.
    jQuery('form#uc-cart-checkout-review-form input#edit-submit:not(.ucSubmitOrderThrobber-processed)', context).addClass('ucSubmitOrderThrobber-processed').click(function (e) {
      if (jQuery('form#uc-cart-checkout-review-form').data('submitted') === true) {
        // Previously submitted - don't submit again
        e.preventDefault();
      } else {
        // Mark it so that the next submit can be ignored
        jQuery(this).after('<span class="ubercart-throbber">&nbsp;&nbsp;&nbsp;&nbsp;</span>');
        jQuery('form#uc-cart-checkout-review-form').data('submitted', true);
      }
    });
  }
}

Oops, rerolled

Disabling the button provides some visual indication to the user, I would like to keep that if possible (although we do have the throbber as well). This new method also doesn't disable the back button in any way, which the old code did.

Ahh I see your point, yes, always good to keep default browser 'disabled' behavior, check this patch.

using .disabled = true is a nice reliable way of setting such value without attr/prop

@dgtlmoon: I don't see why we need the class or preventDefault() now we have disabled the button? Can you test the attached patch?

A lot of other related issues are linked to #2417595: jQuery .attr() deprecated/removed for use with "checked" and "disabled" properties. I would close this issue out as a duplicate of that other one except this one has a patch ...

Note that this issue doesn't apply to 8.x-4.x, where we have a higher version of jQuery and the .js has been modified to use that higher version.

Still waiting on someone who is experiencing this problem to TEST @longwave's patch in #22 to see if it prevents the problem and still works on the default version of jQuery included with Drupal 7.

I really didn't review the patch on its own, but just submitted #2656486: Prevent multiple clicks of submit orders, with the exactly same approach taken from this patch for uc optional checkout review and it seems to work fine.

For what it's worth, I Just applied the patch, tested on a brand new install and it worked. For me its RTBC, it really seems fine.

The code currently works fine with the default jQuery (1.4?) that comes with D7. I don't want to break that just to make it work with new version provided jQuery Update. The goal is to work with both.

Did you reproduce the problem with the new version of jQuery, and test the patch with both versions of jQuery?

I tried it with the core jquery, let me try it with jquery_update and will report back.

seems to work fine with jquery_update 2.x-dev and jquery 1.10, so I'd say it's fine!

Committed #22. Thanks for everyone's patience on this issue, sorry it too so long to get resolved.

Hi All. Sorry for reopening this topic. I wasn't sure if it was better to post an update here or open a new thread.

I use the Bootstrap theme which replaces input submit buttons with actual 'button' elements so the patch in #22 didn't trigger. Attached a small edit that removes the 'input' target.

#34 did the trick. Good catch on the input vs button!

Please commit this.

@drupal_josh: You are the first one who has tested this and reported back. I assume you're using Bootstrap? And does the patch work even when the theme is NOT Bootstrap? I don't want to commit something that will break the non-Bootstrap sites (which is most of them ...).

Oh, and since this is a "Closed" issue, the patch in #34 isn't even being considered or looked at, so there's no way it's going to get committed. This needs a new issue, with the patch posted and set to "Needs Review" so that the testbot can test the patch and so that people can see the patch and review it. Re-opening this current issue is not an option because that will screw up the issue credits for the people who have already contributed to this issue.

@TR Yea it works on bartik no problem and that had an input instead of a button like bootstrap.
The patch just removes "input" from the selector so it's not dependent on the tag. It will work for everyone.

Hi @TR. Thanks for the explanation of the submission process. I've created a separate issue.