Question

Views

I am trying to get the value of an input. Here is what my form looks like:

This is the HTML for it:

<label for="userName"></label>
<input type="text" class="form-input plain-text" id="userName" placeholder="Username">

Here is the jQuery to get its value and log it:

$("#loginSubmit").click(function() {
    var userName = $("#userName").val();
    console.log(userName);
});

But when I type in some text and hit the login button that has the id #userName, the console returns this:

Why does this not output dwedwed in the console?

Thanks

Solution found in comments

Debugging: I found I have more than one input with the same ID

about 4 years ago · Juan Pablo Isaza

Answer question

Accepted Answer · 2022-07-05T16:11:14.740Z

Immediate reasons I can see are:

you are attaching an event before the DOM is even loaded or before the element is available in the DOM (if you're loading JS in the head instead of bottom of body for example)
multiple element's with the same ID
you have a stopPropagation on button elements (or this particular identifier) which is blocking the callback

Other than the above, it's hard to determine what is going on without more code/information.

If its a matter of when you are attaching the listener, try adding $(document).ready() around your event listener.