How do you get a value from a text field?

Question

I suppose this should be straightforward, but I'm stuck to get that "cpsc" value. I tried to google this, and almost all of the search results told me to use ".value". But this particular class "control term" doesn't seem to work, and only returned "undefined".

<div class="control term">
     <input type="text" value="cpsc">
</div>

My code: document.getElementsByClassName("control term")[0].value;

Possible duplicate of [How do I get the value of text input field using JavaScript?](https://stackoverflow.com/questions/11563638/how-do-i-get-the-value-of-text-input-field-using-javascript) — JiiB, Mar 17 '18 at 00:34

score 2 · Answer 1 · answered Mar 17 '18 at 00:34

2

You are reading from the div. You should read from input instead.

<div class="control term"> <input id="inputTag" type="text" value="cpsc"> </div>

document.getElementsBYId("inputTag").value;

answered Mar 17 '18 at 00:34

Bao Pham

577
7
11

score 0 · Answer 2 · answered Mar 17 '18 at 00:36

The problem is that the class "control term" is on the div element and not your input. Also as a note, a class should be only one word (ie. controlTerm), having a space between them assigns two different classes to the div: control, and, term.

You have two options:

Add a class to your input
Get the child of document.getElementsByClassName("control term") and then extract its value.

Hope this helps

<div class="control">
    <input class="term" type="text" value="cpsc">
</div>

document.getElementsByClassName("term")[0].value;

score 0 · Answer 3 · answered Mar 17 '18 at 00:52

<div>
     <input type="text" value="cpsc" class="control term">
</div>

<button onclick="myFunction()">Try it</button>

<script>
  function myFunction() {
     alert(document.getElementsByClassName("control term")[0].value);
  }
</script>

You have to put class attribute in input tag

S.Mandal · Answer 4 · 2018-03-17T03:34:45.713

You need to add class to your input and then you can get the value of input using the following code.

<div class="control term">
    <input type="text" class = "test" value="cpsc">
</div>

<button onclick = "myFunction()">Click me</button>

<script>
    function myFunction(){
        alert(document.getElementsByClassName("test")[0].value);
    }
</script>

If you have multiple input box with same class name inside "control term" div, you can access their values using following code.

<div class="control term">
    <input type="text" class = "test" value="cpsc">
    <input type="text" class = "test" value="cpsc1">
</div>

<button onclick = "myFunction()">Click me</button>

<script>
    function myFunction(){
        alert(document.getElementsByClassName("test")[0].value);
        alert(document.getElementsByClassName("test")[1].value);
    }
</script>

Or if you want to get all values of input box inside "control term" div, you can do something like this.

<div class="control term">
    <input type="text" class = "test" value="cpsc">
    <input type="text" class = "test" value="cpsc1">
</div>

<button onclick = "myFunction()">Click me</button>

<script>
    function myFunction(){

        var x = document.getElementsByClassName("control term");
        for(var i = 0;i<=x.length;i++){

            alert(x[0].getElementsByClassName("test")[i].value);
    }
</script>

Hope this will help you.

How do you get a value from a text field?

4 Answers4