JS text variable always showing undefined

Question

I've seen about 20 or more posts on the subject, but they either don't make sense to me or are slightly different.

Ive been scratching my head on this for ages. Searching for answers provides a ton of conflicting advice but nothing I have seen yet works. Ive boiled the problem down to this simple form. If I enter data in the box and click the button the alert is always undefined. Could somebody explain why please and also how I can assign the variable properly and test by pushing it out on an alert?

Thanks in advance.

Code follows:

<html>
<head>
    <script src="jquery-3.2.1.min.js"></script>
    <script>
        $(document).ready(function () {
            $("button").click(function () {
                var jsPostcode = document.getElementsByName("pcode").value;
                alert(jsPostcode);
            });
        });
    </script>
</head>

<body>
    <form name="login">
        <table>
            <td><input style="width: 80px" name="pcode" type="text" /></td>
            <td><button>OK</button></td>
        </table>
    </form>
</body>
</html>

`getElementsByName` returns a collection of elements. – Kevin Kloet Oct 06 '17 at 09:25 — Kevin Kloet, Oct 06 '17 at 09:25

score 3 · Accepted Answer · answered Oct 06 '17 at 09:25

Since you're using jQuery, you could use the attribute selector $('[name=pbode]') to select the element, and then get it's value by using the .val() function

$(document).ready(function() {
  $("button").click(function() {
    var jsPostcode = $("[name=pcode]").val();
    alert(jsPostcode);
  });
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<form name="login">
  <table>
    <td><input style="width: 80px" name="pcode" type="text" /></td>
    <td><button>OK</button></td>
  </table>
</form>

score 2 · Answer 2 · answered Oct 06 '17 at 09:25

2

document.getElementsByName returns array. So, update this line,

var jsPostcode = document.getElementsByName("pcode").value;

to

var jsPostcode = document.getElementsByName("pcode")[0].value;

answered Oct 06 '17 at 09:25

Muthu Kumaran

17,682
5
47
70

score 1 · Answer 3 · answered Oct 06 '17 at 09:24

getElementsByName returns a collection of all elements.

You need to access the first item of this collection.

To do this update your line to document.getElementsByName("pcode")[0].value.

It is the same way you access the first item of an array in js.

You need to update your code to the following.

$(document).ready(function() {
  $("button").click(function() {
    var jsPostcode = document.getElementsByName("pcode")[0].value;
    alert(jsPostcode);
  });
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<form name="login">
  <table>
    <td>
      <input style="width: 80px" name="pcode" type="text" />
    </td>
    <td>
      <button>OK</button>
    </td>
  </table>
</form>

score 1 · Answer 4 · answered Oct 06 '17 at 09:26

Please refer docs -- https://developer.mozilla.org/en-US/docs/Web/API/Document/getElementsByName

elements = document.getElementsByName(name)
elements is a live NodeList Collection name is the value of the name attribute of the element. Hence we are accessing first item in the array getElementsByName("pcode")[0]

$(document).ready(function() {
        $("button").click(function(){


var jsPostcode = document.getElementsByName("pcode")[0].value;

alert (jsPostcode);

});

});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<html><head>
</head>

<body>
                <form name="login">
                        <table>
                                <td><input style="width: 80px" name="pcode" type="text" /></td>
                                <td><button>OK</button></td>
                        </table>
                </form>
</body>
</html>

score 1 · Answer 5 · answered Oct 06 '17 at 09:27

1

Or use documentGetElementById(); and give them id for better catch.

answered Oct 06 '17 at 09:27

Güney Saramalı

791
1
10
19

JS text variable always showing undefined

5 Answers5