将 HTML 表单输入转换为 JavaScript 变量答案

【问题标题】：Turn HTML Form Input into JavaScript Variable将 HTML 表单输入转换为 JavaScript 变量
【发布时间】：2014-06-01 17:58:01
【问题描述】：

我是 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 变量值也应该改变吗？如果 JavaScript 变量值发生变化怎么办？输入值也应该改变吗？

标签： javascript html forms variables

【解决方案1】：

从 JavaScript 访问 HTML 输入元素

假设您没有其他同名元素，您可以按名称从 JavaScript 访问输入值，如下所示：

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

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

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

现在注册这个函数调用来改变/keyup事件，你就有了一个监控表单值变化的函数：

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

【讨论】：

【解决方案2】：

如果您更喜欢结构化的方法，或者页面上有多个表单，您可以：

创建一个包含所有表单值并更新它们的对象。之后，您只需使用 formValues.inputName 即可访问它们。
将默认值存储在数组中（与输入的顺序相同）。
执行一个函数，该函数将负责输出默认值并在值更改时更新对象。它采用形式（由 Id、Class 等选择）和一组默认值作为参数。

// create the object that will hold the input values
var formValues = {};
// store code in the function for a more 'modular' approach
function inputObj(formNR, defaultValues) { // where defaultValues is an array
  var inputs = formNR.getElementsByTagName('input');
  for ( var i = 0; i < inputs.length; i++) {
    if(inputs[i].type === 'text' || inputs[i].type === 'password') {
      formValues[inputs[i].name] = defaultValues[i]; // store default in object
    }
    inputs[i].value = defaultValues[i]; // output default in input
    inputs[i].addEventListener('keyup', function() { // update object on change
      formValues[this.name] = this.value;
    }, false);
  }
}
// build a little array with the defaultValues for each input
var defValues =['defaultFirstName','defaultLastName','defaultUser',
                 'defaultPass','defaultPass'];
// this will push all inputs from the given form in the formValues object.
inputObj(document.forms[0], defValues); 

// Access the values like this, eg.
console.log(formValues.firstname); // will return 'defaultFirstName'

看到它在行动here。或with CodeView。 注意：示例中的代码添加了一些内容以在页面上显示对象的值。

【讨论】：

【解决方案3】：

尝试首先创建一个从输入字段中获取值的函数：

<script>
    function XX()
    {
        var first2 = document.getElementById("firstname").value;
    } 
</script>

然后你必须在输入更改为onchange 时启动它：

FirstName: <input type="text" id="firstname" name="firstname" onchange="XX()">

【讨论】：