Disable Woocomerce register button after one click

Question

Hello I would like to disable the woocommmerce register page button after one click to avoid multiple clicks.

I have searched the forums and found a bunch of solutions for custom forms and I've tried the following JS code but had no luck. I have a feeling I am setting the wrong selector because I cannot for the life of me figure out what the correct selector for the default register button is.

    <script>
    function disableButton() {
        var btn = document.getElementById('woocommerce-register-nonce');
        btn.disabled = true;
        btn.innerText = 'Posting...'
    }
</script>

I've also tried :

<script>    
jQuery('woocommerce-Button.woocommerce-button.button.woocommerce-form-register__submit').live('click', function (e) {
      var self = this;
      $(this).attr("disabled", "disabled");
      do_something();
      setTimeout(function () {
          $(self).removeAttr('disabled');
      }, 10000);
  });
</script>

Some guidance would be very much appreciated.

Update!

Based on Onboardmass's suggestion I have corrected the selector and got it partially working using jquery.

<script>
    
    jQuery('.woocommerce-Button.woocommerce-button.button.woocommerce-form-register__submit').click(function(){
    jQuery(this).attr("disabled", "disabled");
});
    
    </script>

The button now gets disabled on click however the issue I'm facing now is that the form does not get submitted.

Check this answer - https://stackoverflow.com/questions/2830542/prevent-double-submission-of-forms-in-jquery#:~:text=To%20disable%20just%20the%20submit,('disabled'%2Ctrue)%3B I just tested it and its working fine. — Snuffy, Jun 13 '22 at 06:41

score 1 · Answer 1 · answered Jun 12 '22 at 03:01

1

The issue you're facing is because the selector is incorrect. It should be .woocommerce-Button.woocommerce-button.button.woocommerce-form-register__submit.

answered Jun 12 '22 at 03:01

Onboardmass

84
3
11

Thank you for taking the time to answer. I have edited the code as per : But still can't quite get it to work. – Acephalia Jun 12 '22 at 03:20
What jquery version are you on? `jQuery('selector').live` seems to have been removed in 1.9 `Note: This API has been removed in jQuery 1.9;`. If you're on a newer version you should be using `jQuery('selector').on`. – Onboardmass Jun 12 '22 at 05:26

score 1 · Answer 2 · answered Jul 09 '22 at 11:09

For anyone else who may need this I was able to figure this one out by reading through the suggestions and other threads I found. Thank you Onboardmass & Martin for the guidance!

The time out function is required for the click to register.

<script>
$(document).ready(function () {
$(".woocommerce-Button.woocommerce-button.button.woocommerce-form-register__submit").click(function () {
    setTimeout(function () { disableButton(); }, 0);
});

function disableButton() {
    $(".woocommerce-Button.woocommerce-button.button.woocommerce-form-register__submit").prop('disabled', true);
}
});
</script>

Disable Woocomerce register button after one click

2 Answers2