Question

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

我希望表单的每个部分（e.x.名字，姓氏，新用户名等）都是它自己的JavaScript变量。非常感谢你！

Answer 1

从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()"/>

Answer 2

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

创建一个包含所有表单值并更新它们的对象。之后，您只需使用formValues.inputName。
将默认值存储在数组中（与输入的顺序相同）。
执行一项功能，该功能将负责输出默认值＆amp;更改值时更新对象。它采用表单（由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。 注意：示例中的代码有一些附加内容，用于在页面上显示对象的值。

Answer 3

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

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

然后，当输入随onchange更改时，您必须将其激活：

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

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

3 个答案: