Question

I have a search form that has different elements in it, checkboxes, selects, text fields etc. Each change is accompanied by an ajax call that gets the number of results as a sort of counter. I would like to reset only the previous element that caused the counter to return a value of 0.

I was thinking about keeping track of each change in a variable, and each time the counter evaluates to 0, I would then reset the element that caused the change. I however fear that this could force me to handle all the different elements differently with a lot of code and jumping around.

Is there a possible more elegant solution to the problem that anybody can think of? I would appreciate the help.

Answer 1

I solved the problem by recording each change to the form with

$("#form_id").on("change", function(event) {
  //Event bubbling
  type = $(event.target).get(0).type;
  selector = $(event.target);
}

Then using the Strategy design pattern (Javascript Strategy Design Pattern), I reset each possible field type accordingly. Example for text field,

var Fields = {
  "text": {
    resetAction: function(fieldSelector) {
      fieldSelector.val('');
    }
  }
};

//To call the reset action for the type of field,
Fields[type].resetAction(selector);

I had to trigger a change event for hidden fields to have their changes also bubble.