Your achievements

Level 1

0% to

Level 2

Tip /
Sign in

Sign in to Community

to gain points, level up, and earn exciting badges like the new
Bedrock Mission!

Learn more

View all

Sign in to view all badges

SOLVED

Event Listeners Firing Multiple Times -How to Implement?

michaelj9108429
Level 1
Level 1

I have a form and I'm trying to track 3 selects in the form and 3 text fields, using DTM. I can't get it to work properly? I tried an event-based rule first with my test code and the selects work as designed until I click on a text field. First time I click on a text field, the code works fine but then anytime after that when I click on any element with a listener, the code runs proportionally. For example, If I change the value in the text field, that code will run twice. If I then change the select, that code will run 3 times etc. I have also tried this code in a page load rule and the selects work fine but the text fields don't work at all. I have no idea how to fix this issue? Any advice is appreciated.

var employmentStatusSelect = document.getElementById('mainForm:cont');

employmentStatusSelect.addEventListener('change',trackEmploymentStatusSelect);

  function trackEmploymentStatusSelect (){

        var esSelVal = event.target.value;

        console.log(" event.target.value ==> " + event.target.value);

        if(esSelVal != ""){

        console.log("employmentStatusSelect ==> " + event.target.value); 

    } else {

       console.log("employmentStatusSelect will not report");

    }

    employmentStatusSelect.removeEventListener('change', trackEmploymentStatusSelect);

};

var startCurrentJobInput = document.getElementById('mainForm:cont2');

startCurrentJobInput.addEventListener('blur', trackStartCurrentJobInput);

function trackStartCurrentJobInput(){

    var scjVal = event.target.value;

    console.log(" event.target.value ==> " + event.target.value);

    if(scjVal != ""){

        console.log("startCurrentJobInput ==> " + event.target.value); 

    } else {

       console.log("startCurrentJobInput will not report");

    }

    startCurrentJobInput.removeEventListener('blur', trackStartCurrentJobInput);

};

1 Accepted Solution
Stewart_Schilling
Correct answer by
Community Advisor
Community Advisor

It seems pretty strange that you have DTM event rules that run JS code which adds/removes eventListeners.

When you create a DTM event-based rule, it is creating the listener for you. 

I think I would suggest creating DTM event rules

One triggered by the 'change' event  on  `#mainForm:cont`

Another triggered by the 'blur' event on `#mainForm:cont2`

BTW, I suspect that what you are presently seeing is that your DTM rule keeps adding event listeners.  This is compounded by the fact that your removeEventListener calls are failing.  So, yeah - 1st time, one function call. 2nd time, two function calls, etc.

View solution in original post

1 Reply
Stewart_Schilling
Correct answer by
Community Advisor
Community Advisor

It seems pretty strange that you have DTM event rules that run JS code which adds/removes eventListeners.

When you create a DTM event-based rule, it is creating the listener for you. 

I think I would suggest creating DTM event rules

One triggered by the 'change' event  on  `#mainForm:cont`

Another triggered by the 'blur' event on `#mainForm:cont2`

BTW, I suspect that what you are presently seeing is that your DTM rule keeps adding event listeners.  This is compounded by the fact that your removeEventListener calls are failing.  So, yeah - 1st time, one function call. 2nd time, two function calls, etc.

View solution in original post