如何让数组显示在无序列表中?
How do I get array to show up in an unordered list?
我有以下代码,我希望 gather_form_elements
数组显示为无序列表。
这是我的 html
部分:
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta author="Justin Roohparvar">
<link rel="stylesheet" href="CSS\css.css">
<script src="Javascript/form.js"></script>
<title>Contact Form</title>
</head>
<body>
<form method="POST" action="week_1_contact_form.html">
<h1>Contact Form</h1>
<input id="first_name" type="text" maxlength="50" size ="25" placeholder="First Name" required> <br /><br />
<input id="last_name" type="text" maxlength="50" size="25" placeholder="Last Name" required> <br /><br />
<input id = "email" type="email" name="email" placeholder="Email" required> <br /> <br />
<input id="phone_number" type="tel" name="phone_number" placeholder="Phone Number" required><br /><br />
<input type="Submit" name="Submit" value="Submit" onclick="getFormElements()">
</form>
</body>
</html>
我的 form.js
代码如下:
function getFormElements() {
var gather_form_elements = new Array(document.getElementById("first_name"), document.getElementById("last_name"),
document.getElementById("email"), document.getElementById("phone_number"));
displayValues(gather_form_elements);
}
function displayValues(gather_form_elements) {
for(i=0; i<gather_form_elements.length; i++)
{
document.write(gather_form_elements[i]);
}
}
如有任何建议,我们将不胜感激。
首先,您必须从输入中获取 values
,而不仅仅是元素本身。用你的方法,它应该是这样的:
function getFormElements() {
var gather_form_elements = new Array(document.getElementById("first_name").value, document.getElementById("last_name").value,
document.getElementById("email").value, document.getElementById("phone_number").value);
displayValues(gather_form_elements);
}
function displayValues(gather_form_elements) {
document.write('<ul>');
for(i=0; i<gather_form_elements.length; i++)
{
document.write('<li>'+gather_form_elements[i]+'</li>');
}
document.write('</ul>');
}
正如新手所说,你需要获取每个控件的值。更简单的侦听器版本是使用表单的 elements 集合。控件必须有一个名称才能成功,您可以利用它来计算哪些控件可以获取以下值:
function getFormElements(form) {
var values = [];
[].forEach.call(form.elements, function(control) {
if (control.name) {
values.push(control.value);
}
});
// Show values for testing
console.log(values);
return values;
}
<form onsubmit="getFormElements(this); return false"> <!-- prevent submit for testing -->
<h1>Contact Form</h1>
<input name="first_name" type="text" maxlength="50" size="25" placeholder="First Name" required> <br><br>
<input name="last_name" type="text" maxlength="50" size="25" placeholder="Last Name" required> <br><br>
<input name="email" type="email" placeholder="Email" required> <br> <br>
<input name="phone_number" type="tel" placeholder="Phone Number" required><br><br>
<input type="submit" value="Submit">
</form>
这让您可以添加更多控件,而不管您如何称呼它们。
因此只命名需要名称的控件,如果不需要则不要使用 ID,并将提交侦听器放在表单的提交处理程序上,这样无论表单如何提交,都会调用侦听器. ;-)
我有以下代码,我希望 gather_form_elements
数组显示为无序列表。
这是我的 html
部分:
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta author="Justin Roohparvar">
<link rel="stylesheet" href="CSS\css.css">
<script src="Javascript/form.js"></script>
<title>Contact Form</title>
</head>
<body>
<form method="POST" action="week_1_contact_form.html">
<h1>Contact Form</h1>
<input id="first_name" type="text" maxlength="50" size ="25" placeholder="First Name" required> <br /><br />
<input id="last_name" type="text" maxlength="50" size="25" placeholder="Last Name" required> <br /><br />
<input id = "email" type="email" name="email" placeholder="Email" required> <br /> <br />
<input id="phone_number" type="tel" name="phone_number" placeholder="Phone Number" required><br /><br />
<input type="Submit" name="Submit" value="Submit" onclick="getFormElements()">
</form>
</body>
</html>
我的 form.js
代码如下:
function getFormElements() {
var gather_form_elements = new Array(document.getElementById("first_name"), document.getElementById("last_name"),
document.getElementById("email"), document.getElementById("phone_number"));
displayValues(gather_form_elements);
}
function displayValues(gather_form_elements) {
for(i=0; i<gather_form_elements.length; i++)
{
document.write(gather_form_elements[i]);
}
}
如有任何建议,我们将不胜感激。
首先,您必须从输入中获取 values
,而不仅仅是元素本身。用你的方法,它应该是这样的:
function getFormElements() {
var gather_form_elements = new Array(document.getElementById("first_name").value, document.getElementById("last_name").value,
document.getElementById("email").value, document.getElementById("phone_number").value);
displayValues(gather_form_elements);
}
function displayValues(gather_form_elements) {
document.write('<ul>');
for(i=0; i<gather_form_elements.length; i++)
{
document.write('<li>'+gather_form_elements[i]+'</li>');
}
document.write('</ul>');
}
正如新手所说,你需要获取每个控件的值。更简单的侦听器版本是使用表单的 elements 集合。控件必须有一个名称才能成功,您可以利用它来计算哪些控件可以获取以下值:
function getFormElements(form) {
var values = [];
[].forEach.call(form.elements, function(control) {
if (control.name) {
values.push(control.value);
}
});
// Show values for testing
console.log(values);
return values;
}
<form onsubmit="getFormElements(this); return false"> <!-- prevent submit for testing -->
<h1>Contact Form</h1>
<input name="first_name" type="text" maxlength="50" size="25" placeholder="First Name" required> <br><br>
<input name="last_name" type="text" maxlength="50" size="25" placeholder="Last Name" required> <br><br>
<input name="email" type="email" placeholder="Email" required> <br> <br>
<input name="phone_number" type="tel" placeholder="Phone Number" required><br><br>
<input type="submit" value="Submit">
</form>
这让您可以添加更多控件,而不管您如何称呼它们。
因此只命名需要名称的控件,如果不需要则不要使用 ID,并将提交侦听器放在表单的提交处理程序上,这样无论表单如何提交,都会调用侦听器. ;-)