How do I select the inputted text of a text field?

Question

I'm adding interactivity to a form.

Here is a snippet of the HTML:

<label for="name" id="nameLabel">Name:</label>
<input type="text" id="name" name="user_name">

There is a button at the bottom of the form, 'Register'. If the button is pressed and the Name field is empty, I want to add an alert message, reminding the user to enter their name. I want to do this by amending the label.

I am having trouble trying to select the inputted text of the text-field. Seeing as it's not value or innerHTML? How do I select it?

This is the code I have so far:

    // Form validation. Display error messages and don't let the user submit the form if any of these validation errors exist:
document.querySelector("button").addEventListener("click", function() {
    // Name field can't be empty
    var nameInput = document.getElementById("name");
    var nameLabel = document.getElementById("nameLabel");

    if(nameInput.value === "") {
        nameLabel.innerHTML = "Name: (please provide name)";
        nameLabel.style.color = "red";
    }
});

Possible duplicate of [JavaScript: how to get value of text input field?](http://stackoverflow.com/questions/11563638/javascript-how-to-get-value-of-text-input-field) — naththedeveloper, Aug 31 '16 at 06:15
.value doesn't work though. I get a flash of error in the console but it's too quick to catch what it is. I was just using ??? to make it clear where I was struggling — gloopit, Aug 31 '16 at 06:21
Right click in your console and select "preserve contents across page reloads" or a similar sounding option. — jedifans, Aug 31 '16 at 06:24
Thanks, I got rid of the error but it's still not working right now. — gloopit, Aug 31 '16 at 06:24

Shubham Khatri · Accepted Answer · 2016-08-31T06:58:45.617

1

Use .value to get the value of input field and put css value red in inverted comma as nameLabel.style.color = "red"; Also since you have a

<button type ="submit">submit</button>

you need to stop you page from refreshing. Use e.preventDefault(); for this in your event handler

The flash of error that you get while in console is that red is not defined which it isn't since its a string and you need to give it in "".

document.querySelector("button").addEventListener("click", function() {
    // Name field can't be empty
    var nameInput = document.getElementById("name");
    var nameLabel = document.getElementById("nameLabel");

    if(nameInput.value === "") {
        nameLabel.innerHTML = "Name: (please provide name)";
        nameLabel.style.color = "red";
    }
});

<label for="name" id="nameLabel">Name:</label>
<input type="text" id="name" name="user_name">
<button>Submit</button>

edited Aug 31 '16 at 06:58

answered Aug 31 '16 at 06:21

Shubham Khatri

270,417
55
406
400

Thanks, I can see that works in the code snippet but it's not working in my code for some strange reason – gloopit Aug 31 '16 at 06:25
Yup! Very confused, my code is identical to yours right now – gloopit Aug 31 '16 at 06:29
Okay you said you are creating these input fields dynamically. May I know how are you doing that, could be a issue because of that – Shubham Khatri Aug 31 '16 at 06:39
I've edited the code in my original question to reflect how my JS looks right now. – gloopit Aug 31 '16 at 06:41
Do one thing add a console.log(nameInput) inside you .click event and see if you are getting the desired result and then we can see how to retrieve its value – Shubham Khatri Aug 31 '16 at 06:43
Let us [continue this discussion in chat](http://chat.stackoverflow.com/rooms/122256/discussion-between-gloopit-and-shubham-khatri). – gloopit Aug 31 '16 at 06:46

score 0 · Answer 2 · answered Aug 31 '16 at 06:46

document.querySelector("button").addEventListener("click", function() {
    // Name field can't be empty
    var nameInput = document.getElementById("name");
    var nameLabel = document.getElementById("nameLabel");
 console.log("\"" + nameInput.value + "\"");
    if(nameInput.value.length == 0) {
        nameLabel.innerHTML = "Name: (please provide name)";
        nameLabel.style.color = "red";
    }
});

<label for="name" id="nameLabel">Name:</label>
<input type="text" id="name" name="user_name">
<button>Submit</button>

How do I select the inputted text of a text field?

2 Answers2