javascript - 将 HTML 表单输入转换为 JavaScript 变量

标签 javascript html forms variables

我是 HTML 表单的新手,我想知道如何轻松(或不)更改它对 JavaScript 变量的输入。这是我的代码:

<head>
<title>Begin</title>
<link type="text/css" rel="stylesheet" href="begin.css"/>
</head>
<body>
<form action="begin-create-done.html" method="get">
First Name: <input type="text" name="firstname">
<br>
Last Name: <input type="text" name="lastname">
<br>
<br>
New Username: <input type="text" name="user">
<br>
Password: <input type="password" name="pass">
<br>
Repeat Password: <input type="password" name="rpass">
<input type="submit" value="Submit">
</form>
</body>
</html>

我希望表单的每个部分(例如名字、姓氏、新用户名等)都是它自己的 JavaScript 变量。非常感谢!

最佳答案

从 JavaScript 访问 HTML 输入元素

假设您没有其他具有相同名称的元素,您可以通过名称从 JavaScript 访问输入值,如下所示:

var firstName = document.getElementsByName("firstname")[0].value;

您现在在名为 firstName 的 JavaScript 变量中获得了 firstname 字段的值。只要不断重复,您就会得到其他输入字段。然后,您可以继续并将这些语句包装到一个函数中,并在输入数据更改时调用它。例如:

function formChanged() {
    var firstName = ...
    var lastName = ...
}

现在将此函数调用注册到 change/keyup 事件,您将拥有一个监视更改表单值的函数:

<input type="text" name="firstname" onkeyup="formChanged()" onchange="formChanged()"/>

关于javascript - 将 HTML 表单输入转换为 JavaScript 变量,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/23982774/

相关文章:

Python 表单处理替代方案

python - 如何使用 Python 自动填写在线表单中的文本区域?

javascript - 如何从 Javascript 获取 Payeezy API 响应到 PHP 文件?

javascript - Ember 组件中的共享状态

javascript - Jquery remove() 动态创建的元素

jquery - 尝试获取附加按钮以显示集合中的 block 隐藏元素并关闭所有其他元素

post - GET 与 POST(表单处理)

javascript - 推送多维数组

javascript - $_POST 变量未通过表单传递

jquery - 需要绘制/动画一个小方形背景图像,然后在 x 和 y 上重复它