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 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 ?

• javascript

• I hope you have var login = document.getElementById('login') in there somewhere... – Niet the Dark Absol Commented Jan 29, 2013 at 20:59
• Kolink - there are no IDs defined, so that will not work. – Diodeus - James MacFarlane Commented Jan 29, 2013 at 21:00
• Are you waiting for the DOM to load? – apsillers Commented Jan 29, 2013 at 21:01
• windows.onload is used yes :) – Sir Commented Jan 29, 2013 at 21:03
• @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. – ithcy Commented Jan 29, 2013 at 21:24

5 Answers 5

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).

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

var usr = document.login.usr.value;

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/L3RvL/

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");

Works in every browser:

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