Question

我有以下代码，我希望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]);
    }
}

任何建议都将不胜感激。

Answer 1

首先，您必须从输入中获取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>');
}

Answer 2

正如新手所说，你需要获得每个控件的价值。一个更简单的监听器版本是使用表单的元素集合。控件必须具有成功的名称，您可以利用它来计算出哪些控件来获取值：

＆＃13;

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;
}

＆＃13;

<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>

＆＃13;

这可以让您添加更多控件，而不关心您所谓的控件。

因此，只有需要名称的名称控件，如果您不需要ID，请不要使用ID，并将提交侦听器放在表单的提交处理程序中，这样无论表单如何提交后，监听器被调用。 ; - ）

如何让数组显示在无序列表中？

2 个答案: