javascript - 无法读取未定义的属性“值”

Question

我有一个像这样的简单表格：

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

但我不断收到无法读取我的 javascript 的属性的这一行：

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

我收到此错误的原因是什么？

Answer 1

尝试为您的表单命名并更改您的代码，如下所示：

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

在你的 javascript 中：

var usr = document.login.usr.value;

您可以在此处查看（jsfiddle 链接）。

Answer 2

适用于所有浏览器：

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

Answer 3

<input type="text" value="" name="usr" />不会神奇地变成变量login.usr，需要根据 DOM 定义值。

var usr = document.login.usr.value;

Answer 4

尝试使用getElementsByName：

该getElementsByName()方法访问具有指定名称的所有元素。

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

http://jsfiddle.net/L3RvL/

Answer 5

方法一：

<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

方法 2 - 无效的 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

方法三：

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

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

方法 4： - 这些天首选，因为 ID 必须是唯一的 - 如果页面上有更多带有 usr 的表单需要相同的验证，则用处不大

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

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