简体   繁体   中英

Disabling default action (return false) even when action is set to .off

I have a registration submit button on my website that is handled with Jquery. The problem is that I want to prevent people from clicking on it more than once while it is going through the process of registering their account. For this reason I disable the click event once they have clicked it, and do not re-enable the click unless there is an error. See bwlow

function registerClick() {
    $('#register_submit').off('click',registerClick);
    $.ajax( {
        type: "POST",
        url: "/ajax/register.ajax.php",
        data: $("#register_form").serialize(),
        success: function(data) {
            var result = jQuery.parseJSON(data);
            if (result.success) {
                alert('Account registered. You are now being transferred to Paypal for payment.');
                window.location = result.success;
            } else if (result.error) {
                alert(result.error);
                $('#register_submit').on('click',registerClick);
            } else {
                alert('Unhandled exception');
                $('#register_submit').on('click',registerClick);
            }
        } 
    }); 
    return false;
};

// signup
$('#register_submit').on('click',registerClick);

What unfortunately happens now is that if they double click the button, the second click triggers the default button action which is to submit the form to #.

I'm thinking that maybe I need to disable the button all together, but I'm new to Jquery so this is uncharted territory for me.

EDIT:

I should also mention that this is the button HTML (so not a normal submit button).

 <input type="image" class="input_submit" id="register_submit" src="images/get_your_email.png" />

I would add class to the button when it is clicked once and remove class when process is completed plus a check also to ensure that button does not have class of disable.

$('#register_submit').on('click', function() {
   if($(this).hasClass("disable")) {
       return false;
   }
   else {
       $(this).addClass("disable");
       registerClick();
   }
});
function registerClick() {
    $.ajax( {
        type: "POST",
        url: "/ajax/register.ajax.php",
        data: $("#register_form").serialize(),
        success: function(data) {
            var result = jQuery.parseJSON(data);
            if (result.success) {
                alert('Account registered. You are now being transferred to Paypal for payment.');
                window.location = result.success;
            } else if (result.error) {
                alert(result.error);
                $('#register_submit').on('click',registerClick);
            } else {
                alert('Unhandled exception');
                $('#register_submit').on('click',registerClick);
            }
            remove_addedClass();
        } 
    }); 
    return false;
};
function remove_addedClass() {
    $("#register_submit").removeClass("disable");
}

The technical post webpages of this site follow the CC BY-SA 4.0 protocol. If you need to reprint, please indicate the site URL or the original address.Any question please contact:yoyou2525@163.com.

 
粤ICP备18138465号  © 2020-2024 STACKOOM.COM