Cannot read property 'value' of undefined

Question

I have a simple form like this:

<form method="post" id="login">

Username: <input type="text" value="" name="usr" />
Password: <input type="password" value="" name="pw"/>
<input type="submit" id="log" name="log" value="Login" style="width:250px;"/><br/>

</form>

But i keep getting cannot read property for my javascript with this line:

var usr = login.usr.value;
var pw = login.pw.value;

What is the reason i get this error ?

I hope you have `var login = document.getElementById('login')` in there somewhere... — Niet the Dark Absol, Jan 29 '13 at 20:59
@Kolink it's an old [though terrible] JavaScript convention that an HTML form with a name attribute will be available as a global variable with that name, and inputs with names inside that form will be accessible as named properties of that variable. See [this](http://stackoverflow.com/a/6381766/59461). — glomad, Jan 29 '13 at 21:24

score 1 · Accepted Answer · answered Jan 29 '13 at 21:01

1

Try to give your form a name and change your code like below :

<form method="post" id="login" name="login">

Username: <input type="text" value="" name="usr" />
Password: <input type="password" value="" name="pw"/>
<input type="submit" id="log" name="log" value="Login" style="width:250px;"/><br/>

</form>

and the in your javascript :

var usr = document.login.usr.value;

You can check here (jsfiddle link).

answered Jan 29 '13 at 21:01

Mehdi Karamosly

5,388
2
32
50

Ah thats the ticket. Form name rather than id! – Sir Jan 29 '13 at 21:03
There are many ways to do it, since you used name I implemented it using the name but you can do it with id as well using `document.getElementById()` – Mehdi Karamosly Jan 29 '13 at 21:05
However form name will not validate in some cases – mplungjan Jan 29 '13 at 21:06
It is not valid xhtml strict for example – mplungjan Jan 29 '13 at 21:07

score 0 · Answer 2 · answered Jan 29 '13 at 20:59

0

<input type="text" value="" name="usr" /> does not magically become the variable login.usr, you need to define the value based on the DOM.

var usr = document.login.usr.value;

answered Jan 29 '13 at 20:59

Diodeus - James MacFarlane

112,730
33
157
176

ok that fixed the initial problem but that gives `Cannot read property 'usr' of undefined ` – Sir Jan 29 '13 at 21:01
In Firefox, Chrome, and IE it seems to do so: http://jsfiddle.net/dAE6X/, since the DOM element with the id of `login` gets a JS variable of the same name, and form elements are added as subproperties of the form element according to their `name`. (I know it's horribly gross, but that doesn't mean it's causing the OP's problem.) ...Or did I make a mistake in my own fiddle code, somehow? – apsillers Jan 29 '13 at 21:02
This does not work with a form with an ID only in several browsers – mplungjan Jan 29 '13 at 21:14
For scripting, I prefer to use IDs, mainly because I use jQuery, and getting a value by ID in jQuery is very short. – Diodeus - James MacFarlane Jan 29 '13 at 21:28
Actually it *does* magically become the variable `login.usr` in a lot of browsers, unfortunately. (If the form is named "login", that is.) [this code](http://jsfiddle.net/WYu3r/) works in Chrome, IE and Firefox, for example. – glomad Jan 29 '13 at 21:34

score 0 · Answer 3 · answered Jan 29 '13 at 21:02

0

Try using getElementsByName:

The getElementsByName() method accesses all elements with the specified name.

var usr = document.getElementsByName('usr')[0].value;
var pw = document.getElementsByName('pw')[0].value;

http://jsfiddle.net/L3RvL/

answered Jan 29 '13 at 21:02

KingKongFrog

13,946
21
75
124

score 0 · Answer 4 · answered Jan 29 '13 at 21:13

Method 1:

<form method="post" id="login">
  Username: <input type="text" value="" name="usr" />

var form = document.getElementById("login"); //DOM access
var usr = form.elements["usr"]; // Forms access

Method 2 - not valid xhtml:

<form method="post" name="login">
  Username: <input type="text" value="" name="usr" />

var form = document.login; // Forms access
var usr = form.elements["usr"]; // Forms access

Method 3:

<form method="post">
  Username: <input type="text" value="" name="usr" />

var usr = document.getElementsByName("usr")[0]; // first field on page named this

Method 4: - preferred these days since ID MUST be unique - less useful if there are more forms with usr on the page that needs same validation

<form method="post">
  Username: <input type="text" value="" id="usr" name="usr" />

var usr = document.getElementById("usr");

score 0 · Answer 5 · answered Jan 29 '13 at 21:18

0

Works in every browser:

   document.forms["login"].elements["usr"].value;
   document.forms["login"].elements["pw"].value;

answered Jan 29 '13 at 21:18

KingKongFrog

13,946
21
75
124

Cannot read property 'value' of undefined

5 Answers5