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');
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.