Question

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;
}

where the ‘searching’ class currently has just {display: none}

Answer 1

I use this plugin http://jquery.malsup.com/block/, it implement a semi-transparent img that can be apply to a Div or the full page, it’s pretty good and cross browser supported.

EDIT:
As some people stated this plugin does not block the form inputs, selects, etc… If you really want it to be bulletproof and don’t allow people mess around with the form you need to implement further blocking, I suggest using a pure HTML solution something like this https://stackoverflow.com/a/36586206/118447