Activate submit button on form change and detach event listener

Question

We have pages that contain 1-3 forms. Each form does have a submit button which is styled as inactive^* as long as the user didn't change the form.

Now I need to:

• remove the class from the button as soon as the form changes
• remove the event listener from the form

I came up with this:

for (const form of Array.from(document.getElementsByClassName('form'))) {
    const formHandlerChange = event => {
        const submit = form.getElementsByClassName('disabled')[0];
        submit.classList.remove('disabled');
        form.removeEventListener('change', formHandlerChange);
    };

    form.addEventListener('change', formHandlerChange);
}

Is this a good solution? Is it a bad thing to create formHandlerChange for each form? Would it be better to get the form each time formHandlerChange is entered manually and have this function defined only once outside the loop?

_{^* It's also disabled but I removed it for simplicity of this review.}

Answer 1

If you use event.currentTarget instead of form, you can declare the event handler function once and reuse it:

function formHandlerChange(event) {
    const form = event.currentTarget;
    const submit = form.querySelector('.disabled');
    submit.classList.remove('disabled');
    form.removeEventListener('change', formHandlerChange);
}

for (const form of document.querySelectorAll('form')) {
    form.addEventListener('change', formHandlerChange);
}

(Note: I also used querySelector() and querySelectorAll() as they are more flexible than the various getElementBy methods)