Question

I have a bunch of textboxes on a page and a submit button. I have wired up the TextChanged event of the textbox to execute a server-side method. The user enters values into the textboxes, tabs out to the next textbox (triggering the textchanged event) and finally clicks the submit button which invokes another server-side method. All the functions are asynchronous. The submit method needs to be executed only after the textchange method is finished as they both share the same data. The issue is sometimes the textchange method takes slightly longer to finish, and the submit method is triggered before the textchange function is completed. How do I prevent this? How do I lock/queue functions?

Answer 1

Don’t lock or queue anything! Just disable the the submit button until the change event + ajax is complete.

$('#submitBtn').attr('disabled', 'disabled');

Or for jQuery 1.6+:

$('#submitBtn').prop('disabled', true);

And when the change ajax finishes:

$('#submitBtn').attr('disabled', '');//or $('#submitBtn').prop('disabled', false)