Does not capture the second form attribute name with getAttribute('name');

Question

I'm just looking at the JavaScript events for a project, but there is something I cannot find the reason why it does not work or does not show the event with getAttribute('name') when supposedly if there is the second like this:

<form name='otherRegistration'>
    <input type="email"></input> 
    <button class="btn btn-safe col-xs-6"></button>
</form>

<form name='registration'>
    <button class="btn btn-security col-xs-6"></button>
</form>

The question is that if it catches the name attribute of the first form name otherRegistration but does not capture the name of the second form registration which is weird and I don't have an idea why this happens, I have checked carefully and can not find the reason.

Once having the attribute name of the form does not enter the if which I do not understand because, if it revises with typeof and returns string

I would appreciate if you help me understand why and what is the solution, here the code:

function userSessionSubmit() {

    var form = document.querySelector('form');
    var formName = '';

    form.addEventListener('click', function () {
        formName = form.getAttribute('name');

        console.log(formName);

        switch (formName) {
            case 'otherRegistration':
                alert('TRIGGER OTHER'); //works 
                break;
            case 'registration':
                alert('TRIGGER REGIS'); //does not work...
                break;
            default:
                alert('nothing');
                break;
        }
    });
};

userSessionSubmit();

score 2 · Answer 1 · edited Sep 19 '18 at 20:36

2

document.querySelector(selector) selects one element - the first one found on the page.

To select multiple elements with one query you should use document.querySelectorAll(selector) and assign it to a variable.

Example code:

const forms = document.querySelectorAll('form'); // select all forms on the page
Array.prototype.forEach.call(forms, (form) => {
   form.addEventListener('click', listenerFunc); // add on click listener to every form
}); // iterate trough found elements

Edit:

You should consider using unanonymous functions in your listeners - you can not use removeEventListener() on anonymous functions.

edited Sep 19 '18 at 20:36

T.J. Crowder

1,031,962
187
1,923
1,875

answered Sep 19 '18 at 20:24

1

Worth noting that on modern browsers, the `NodeList` returned by `querySelectorAll` has its own built-in `forEach` method, which is [easily polyfilled](https://stackoverflow.com/questions/46929157/foreach-on-queryselectorall-not-working-in-recent-microsoft-browsers/46929259#46929259) for older browsers. So there isn't really any need for `Array.prototype.forEach.call` anymore. – T.J. Crowder Sep 19 '18 at 20:26
Right. You can also use `Object.values` for that. It all works. – Sep 19 '18 at 20:27
Um, huh? `Object.values` would be a very strange choice for the above. Whereas `document.querySelectorAll("form").forEach(...)` is much simpler and more direct. – T.J. Crowder Sep 19 '18 at 20:33
It is, I agree with you 100%. I just saying there are options - some better than others. – Sep 19 '18 at 20:34

Does not capture the second form attribute name with getAttribute('name');

1 Answers1