javascript - 从表单输入 JS 实例化变量

Question

我有一些 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>

Answer 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，还有其他方法。

Answer 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 所建议的，但这将是一样的。