logo标签列表

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

javascripthtmlformsvariables
14

我对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 变量值发生变化，输入值是否也应该改变？ - jsalonen
3个回答
11

如何从JavaScript访问HTML输入元素

假设没有其他相同名称的元素，您可以按以下方式通过名称访问JavaScript中的输入值：

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

现在你已经用 JavaScript 变量 firstName 获取到了 firstname 字段的值。只需重复这个步骤，你也可以获取其他输入字段的值。随后你可以将这些语句封装成一个函数，在输入数据改变时调用它。例如:

function formChanged() {
    var firstName = ...
    var lastName = ...
}
现在将这个函数调用注册到更改 / 键入事件中，您就有了一个监视表单值变化的函数：
<input type="text" name="firstname" onkeyup="formChanged()" onchange="formChanged()"/>
3
如果您想要更有结构的方法，或者在页面上有多个表单时，您可以：
  1. 创建一个对象来保存所有表单值并更新它们。之后，您可以通过 formValues.inputName 简单地访问它们。
  2. 将默认值存储在数组中（与输入框的顺序相同）。
  3. 执行一个函数来处理输出默认值和在值更改时更新对象。它需要表单（通过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。或者使用CodeViewhere。注：示例中的代码有一些添加，以显示对象的值。

0
尝试首先创建一个函数，从输入字段中获取值：
<script>
    function XX()
    {
        var first2 = document.getElementById("firstname").value;
    } 
</script>

然后当输入改变时，您必须使用onchange来启动它：

FirstName: <input type="text" id="firstname" name="firstname" onchange="XX()">
网页内容由stack overflow 提供, 点击上面的
可以查看英文原文，
原文链接