Disable a form and all contained elements until an ajax query completes (or another solution to prev
- by Max Williams
I have a search form with inputs and selects, and when any input/select is changed i run some js and then make an ajax query with jquery. I want to stop the user from making further changes to the form while the request is in progress, as at the moment they can initiate several remote searches at once, effectively causing a race between the different searches.
It seems like the best solution to this is to prevent the user from interacting with the form while waiting for the request to come back. At the moment i'm doing this in the dumbest way possible by hiding the form before making the ajax query and then showing it again on success/error. This solves the problem but looks horrible and isn't really acceptable. Is there another, better way to prevent interaction with the form? To make things more complicated, to allow nice-looking selects, the user actually interacts with spans which have js hooked up to them to tie them to the actual, hidden, selects. So, even though the spans aren't inputs, they are contained in the form and represent the actual interactive elements of the form.
Grateful for any advice - max. Here's what i'm doing now:
function submitQuestionSearchForm(){
//bunch of irrelevant stuff
var questionSearchForm = jQuery("#searchForm");
questionSearchForm.addClass("searching");
jQuery.ajax({
async: true,
data: jQuery.param(questionSearchForm.serializeArray()),
dataType: 'script',
type: 'get',
url: "/questions",
success: function(msg){
//more irrelevant stuff
questionSearchForm.removeClass("searching");
},
error: function(msg){
questionSearchForm.removeClass("searching");
}
});
return true;
}
