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.