从表单输入 JS 实例化变量答案

【问题标题】：Instantiating variables from form input JS从表单输入 JS 实例化变量
【发布时间】：2013-07-12 20:03:06
【问题描述】：

我有一些 HTML 来获取一些输入。我可以验证它，但是我不知道如何获取这些值并将它们分配给我自己的变量。我该怎么做才能重复使用这些信息？

<form name="myForm" target="_top" onSubmit="return validateForm()">
First Name: <input type="text" name="FirstName">
Last Name:  <input type="text" name="LastName">
Age:        <input type="text" name="Age"> <br>
<input type="submit" value="Submit">
</form>

【问题讨论】：

标签： javascript html forms input

【解决方案1】：

如果你给每个输入字段一个 id，你可以用普通的 javascript 得到这样的值：

HTML：

<form name="myForm" target="_top" onSubmit="return validateForm()">
First Name: <input type="text" id="FirstName" name="FirstName">
Last Name:  <input type="text" id="LastName" name="LastName">
Age:        <input type="text" id="Age" name="Age"> <br>
<input type="submit" value="Submit">
</form>

Javascript：

var firstname = document.getElementById('FirstName').value;
var lastname = document.getElementById('LastName').value;
var age = document.getElementById('Age').value;
alert(firstname+'-'+lastname +'-'+age );

如果你可以使用 jQuery 或 Mootools 还有其他方法。

【讨论】：

【解决方案2】：

我强烈建议向至少表单本身添加一个 ID。

<form id="frmMyForm" name="myForm" target="_top" onSubmit="return validateForm()">
First Name: <input type="text" name="FirstName">
Last Name:  <input type="text" name="LastName">
Age:        <input type="text" name="Age"> <br>
<input type="submit" value="Submit">
</form>

JavaScript：

var myForm = document.getElementById('frmMyForm');
var firstName = myForm['FirstName'];
var lastName = myForm['LastName'];
var age = myForm['Age'];

最佳做法是将 ID 添加到您将使用 JavaScript 引用的所有输入字段中，例如 @Sergio 所建议的，但这将起作用。

【讨论】：