在 JavaScript 中获取 HTML 表单值
在 JavaScript 中,我们可以使用特定输入元素的 id 属性来获取值或触发 name 属性来获取数值。
这两种约定都将继续从用户那里获取原始数据。从技术上讲,目标是获取用户的所有输入并确保流程正常运行。
在这里,我们将使用 HTML DOM
又名 document.forms
从 HTML 表单
中检索所有元素。这里简要介绍了可用于与 HTML 元素和属性交互的方法。
此外,在我们的示例中,我们将使用识别元素的 id
的随意方式从那里提取信息。
在 JavaScript 中使用 document.forms
获取 HTML 表单值
document.forms
方法使用 name
属性来定位表单及其元素。从战术上讲,表单中的所有值都将通过这种启动方式传递。
我们将有一个 select
元素,后跟一个多个 option
元素。我们将从那里选择一个偏好,并将值分开。
稍后,当 document.forms
将被启动时,它将获取分隔值。让我们检查代码块是否正确可视化。
代码片段:
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width">
<title>Test</title>
</head>
<body>
<form name="form">
<select name="fruit" id="fruits">
<option value="0">Select Fruit</option>
<option value="mango">Mango</option>
<option value="apple">Apple</option>
<option value="orange">Orange</option>
</select>
<button type = "submit">Hit</button>
</form>
<p id="print"></p>
</body>
</html>
var form = document.forms['form'];
form.onsubmit = function(e){
e.preventDefault();
var select = document.form.fruit.value;
console.log(select);
document.getElementById('print').innerHTML=select.toUpperCase();
}
输出:
如你所见,采用 document.forms
方法与 HTML form
值交互的 form
对象将返回所有元素。
onsubmit
方法用于处理该选定值的进一步操作。在该实例中,select
对象使用 form
和 select
元素的相应 name
属性获取所需值。
后来我们在页面上打印了大写格式的值。
在 JavaScript 中使用 id
访问 HTML 表单值
对于这个例子,我们将使用 documnet.getElementById
和 querySelector
来驱动表单输入。
使用这种格式的工具很普遍,并且与 document.forms
方法类似。因此,以下代码行将演示预览。
代码片段:
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width">
<title>Test</title>
</head>
<body>
<form name="form" id="forms">
Enter name:
<input type="text" id="name">
<input type="button" value=" Click Up">
</form>
<p id="print"></p>
</body>
</html>
var form = document.getElementById("forms");
form.onclick = function(e){
e.preventDefault();
var name = document.getElementById("name").value;
console.log(name);
document.getElementById('print').innerHTML=name.toUpperCase();
}
输出:
JavaScript 中对象 form
访问的表单,以及输入的值也是从 .value
方法派生的。
在前面的例子中,我们使用 button
元素提交输入,这里我们使用 input type button
执行提交。
这里的区别仅在于 onsubmit
和 onclick
,两者的工作方式相似。