JavaScript: Add Event Listeners to Dynamic Form Where Specific Form Elements Don't Exist on Page Load?

Question

I'm curious if there is a way to add event listeners to form fields which are dynamic and not present at page load? My issue is I'm working with a form which is dynamic and changes based on selections made. The issue is, I need to attach event listeners to specific fields in the form but on page load, not all these form elements exist? For example, the dropdown below will always exist on the page:

`var employmentStatusSelect = document.getElementById('mainForm:cont_appRequestStatus');
employmentStatusSelect.addEventListener('change',trackEmploymentStatusSelect);`

but the next field will show if there is a specific selection from above element

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

startCurrentJobInput.addEventListener('blur', trackStartCurrentJobInput);

Since it doesn't exist when the page loads, I can't attach an event listener to it and the above code throws an error. Is there any way to attach the event listener to the 2nd element once it appears? JavaScript only, please! * I cannot make changes to the form or page and can only inject my code via a Tag Management system *

Answer 1

First of all, if you share more codes, you may get better help. But, I guess what you should do is to run a function (I will call it assign() for now) to assign a value to startCurrentJobInput when employmentStatusSelect has a value.

So, I recommend you to define startCurrentJobInput variable globally like this (I guess you would need it globally to use in other funcs):

var startCurrentJobInput;

And do not add event listener yet. Then, when employmentStatusSelect is selected and new form element created, run assign func to assign document.getElementById('mainForm:cont_appRequeststart_job') to startCurrentJobInput . Then, you can add event listener to it with:

startCurrentJobInput.addEventListener('blur', trackStartCurrentJobInput);

Answer 2

Update a better way. Turn out if you add a blur event listener to form, all input element will trigger that event too. https://developer.mozilla.org/en-US/docs/Web/Events/blur

 var form = document.getElementById('mainForm'); form.addEventListener('blur', function( event ) { if(event.target.matches('#cont_appRequeststart_job')){ console.log('blur event triggered'); } }, true); // add input var input = document.createElement('input'); input.id = 'cont_appRequeststart_job'; form.appendChild(input) 

 <form id="mainForm"> </form> 

You can keep trying every 0.5s until the element exists. Not recommended.

function tryBindEvent(){
    var startCurrentJobInput = document.getElementById('mainForm:cont_appRequeststart_job');
    if(startCurrentJobInput){
        startCurrentJobInput.addEventListener('blur', trackStartCurrentJobInput);
    }else{
        setTimeout(tryBindEvent, 500);
    }   
}
tryBindEvent();

Answer 3

You can attach a event listener on the document body and check the element type inside the callback and do the modifications.

document.addEventListener('change', function(e) {
    if(e.target && e.target.id === 'mainForm:cont_appRequeststart_job') {
        //do something
    }
});