CODEWITHSUNDEEP
javascriptjquery
Ian McGarry
Ian McGarry

Reputation: 145

Triggering change events from within a change event

EDIT: here is a much simpler JSFiddle version of the code that illustrates the problem more succinctly:

https://jsfiddle.net/Lfo463d9/2/

I have a bunch of form elements that when updated change the options of the element next in the list. I have that working fine. However, now I am trying to get it so that if the root element is changed then it checks the next element to see if it is part of the new list and if not then makes it blank and then triggers the change event of the next one (so that it will in turn make the next element blank and so on). The change event doesn't seem to be firing.

I am not getting any errors in the console.

Is this because I am trying to fire a change event from within a change event? Is there some sort of blocking going?

(or am I just doing something stupid - I only started javascript a week or so ago)

I've tried calling the change() function on the element in javascript too.

function addChainOptions(anelementID, nextelementID, listToChangeID, firstToSecond, secondFromFirst)
  { var anelement = document.getElementById(anelementID);
    anelement.addEventListener("change", function() {

      var nextelement = document.getElementById(nextelementID);
      var listToChange = document.getElementById(listToChangeID);

      console.log(this.id + "has changed");
      if(this.value.length == 0)
      {
        nextelement.value = "";
        $("#" + nextelementID).change();
      }

      nextelement.disabled = true; 

      google.script.run.withSuccessHandler(function(value) {

         htmlOptions = value.map(function(r){return '<option value = "' + r[0] + '">';}).join(" ")

         listToChange.innerHTML = htmlOptions;


           if(value.length == 1) {
             nextelement.value = value[0];
             nextelement.change();
           } 
           if(value.includes(nextelement.value) == false && nextelement.value.length > 0)
           {
             nextelement.value = "";
             console.log(nextelement.id + "set to blank - triggering change")
             $("#" + nextelementID).change();
           }
           nextelement.removeAttribute("disabled");

      }).subListLookUp(firstToSecond, secondFromFirst, this.value);   
    });

  };

  addChainOptions("productTypesInput01", "productsInput01", "productsList01", "ProductTypeMulti", "Products"); 
  addChainOptions("brandsInput01", "productTypesInput01", "productTypesList01", "BrandToProductType", "ProductTypeFromBrand"); 
  addChainOptions("category", "brandsInput01", "brandsList01", "CategoryToBrand", "BrandFromCategory");

At the moment it is setting the next one to blank and trying to trigger the change but nothing happens.

Upvotes: 0

Views: 74

Answers (1)

Murali Nepalli
Murali Nepalli

Reputation: 1618

You should try listening to "input" event instead of "change".

const firstinput = document.getElementById("input1");
const secondinput = document.getElementById("input2");
const thirdinput = document.getElementById("input3");

function dispatchEvent(target, eventType) {
 var event = new Event( eventType, {
    bubbles: true,
    cancelable: true,
	});
  target.dispatchEvent(event);
}

firstinput.addEventListener("input", function() {  
  secondinput.value = 2;
  dispatchEvent(secondinput,"input");
});

secondinput.addEventListener("input", function() {  
  thirdinput.value = 3;
  //dispatchEvent(thirdinput,"input"); 
});
<input id="input1">
<input id="input2">
<input id="input3">

Upvotes: 1

Related Questions