Tuesday, October 13, 2009

Temporarily locking submit button

Suggested by this example.
I need a temporarily locking submit button because if there's a validation error on the page, the user needs to resubmit. But I need to stop the clickers (slow response sometimes on this server) and give them some feedback.

$(document).ready(function() {
$(':submit').click(function() {
$original = $(this).val();
$(this).val('Saving, please wait...')
.attr("disabled","disabled")
.fadeIn('slow')
.animate({opacity: 0.4}, 4000)
.fadeIn('slow', function() {
$(this).val($original).removeAttr("disabled")
.animate({opacity: 1}, 2000)
});
});
});

My only problem is that it conflicts with the jquery validation plugin we're using: it prevents the error bubbles from displaying when submit is clicked.
If I can reference a validation value then I can check whether this function needs to execute or not.

No comments:

Post a Comment