MyBB Community Forums

Full Version: Disable Registration Button On Click
You're currently viewing a stripped down version of our content. View the full version with proper formatting.
Hello everyone, my forums are https://www.thepcboard.com
MyBB, PHP Versions and SQL Info: here

I'm having problems if for any reason the "Submit Registration" button is clicked more than once before the data is submitted and redirected. A simple solution would be for me to disable the registration button during the submission process (which is typically like a second of time).

I've tried to modify member_register template in an attempt to disable the button once it's begun submitting data, but I don't know much about js. I made the following changes in an attempt to fix this:
<input type="submit" class="button" name="regsubmit" value="{$lang->submit_registration}" /> 
to
<input type="submit" class="button" name="regsubmit" value="{$lang->submit_registration}" 
onclick="this.disabled=true;this.parentNode.submit();" /> 

But that just prevented the Submit Registration button from working entirely. I also want the button to continue checking if required fields are filled as it does.

Any help with this would be greatly appreciated!
Anybody able to help with this?
(2018-06-14, 06:51 PM)Amlogic Wrote: [ -> ]Anybody able to help with this?

Aside from actual coding...

In the initial registration screen, you should make a LARGE print note indicating that users must WAIT a certain amount of time before the registration process is completed.
Failure to wait will result in the user's account being locked due to possible multiple registrations. 

You can word this anyway you want, but you must get the point across that the users must be patient to wait for the activation process to be completed. 
Not all activation process is completed within 2 seconds. It doesn't happen that way. 
Some of my users have reported that it takes up to 60 seconds for the activation email to show up in their Inbox. 
Sometimes, that activation email shows up in the Spam/Junk folder due to their email program. 

Just my 2 cents.
I've updated my OP to better explain my issue. It's not always on purpose that an individual double clicks the "Submit Registration" button. I simply need to have the button disabled once it recognizes all fields are filled and as it goes to submit the data.
Buttons might be nested within more elements - try .closest() (might not work on Internet Explorer):
onclick="this.disabled = true; this.closest('form').submit();"
(2018-06-14, 10:26 PM)Devilshakerz Wrote: [ -> ]Buttons might be nested within more elements - try .closest() (might not work on Internet Explorer):
onclick="this.disabled = true; this.closest('form').submit();"

This fixed it thank you, now if a user hits the button more than once it doesn't cause issue. However, if a field isn't filled out it originally would bounce back up with something such as this:

[Image: F09IAEn.png]

It doesn't do that anymore, is there any way to maintain that functionality as well?
Are you sure this worked for you properly? Coz, for me that broke the js validator and I got server side validation errors.
Anyway if this worked for you, somehow and you got js validated inline errors as you have shown in the above snap then all you have to do is first identify if there is any error in your submitted form or not. If yes then enable back the submit button.

Now there is a good news and a bad one as well.

Good news is there is an in-built handler in the validator which we can use to detect if there is any error present in the submitted form.
Bad news is, I have no clue, how the validator initiator js part is hardcoded in the core (I'm afraid! Sad ) So, you have no option left but to core edit.

Open the member.php and find this chunk of code near about line ~793 (as per latest repo):

        $validator_javascript = "<script type=\"text/javascript\">
$(document).ready(function() {
    $('#registration_form').validate({
        rules: {
            username: {

Change it to:

        $validator_javascript = "<script type=\"text/javascript\">
$(document).ready(function() {
    $('#registration_form').validate({
        invalidHandler: function(event, validator) {
            var errors = validator.numberOfInvalids();
            if (errors) {
                $('input[name=\"regsubmit\"]').removeAttr('disabled');
            }
        },
        rules: {
            username: {
... and save. Now this should re-enable the submit button in case there is any error in your submitted form.
Not tested in deep, but I guess this should work.