HTML 表单输入未存储在 JavaScript 数组中答案

【问题标题】：HTML form input not storing in JavaScript arrayHTML 表单输入未存储在 JavaScript 数组中
【发布时间】：2016-02-17 00:26:56
【问题描述】：

所以我使用了一个名为 details 的基本表单，它要求 4 种基本类型的用户输入。问题是我无法将此输入存储在我的 js 数组中。 HTML 如下所示：

<!DOCTYPE html>
<html>
<head>
    <title>Untitled Document</title>
    <meta charset="UTF-8">
    <meta name="description" content="">
    <meta name="keywords" content="">
    <script src="store.js" type="text/javascript"></script>
</head>
<body>
<form action="cgi-bin/formmail.pl" method="post">
    Name: <input id="name" type="text" name="name" value="" size="25" maxlength="50" />
    <br/>
    <br/>
    Date: <input id="date" type="date" name="date" value="" size="25" maxlength="50" />
    <br/>
    <br/>
    Location: <input id="location" type="text" name="location" value="" size="25" maxlength="50" />
    <br/>
    <br/>
    Category: <select><option value="landscape">Landscape</option>
    <option value="portrait">Portrait</option>
    <option value="conceptual">Conceptual</option>
    <option value="street">Street</option>
    <option value="fine art">Fine Art</option>
    <option value="people">People</option>
    <option value="abstract">Abstract</option>
    <option value="nature">Nature</option>
    <option value="architecture">Architecture</option>
    <option value="flower">Flower</option>
    <option value="general">General</option>
    <option value="animal">Animal</option>
    <option value="children">Children</option>
    </select>
    <br/>
    <br/>
    <input type="button" value="Change details" onclick="insert()" />
</form>
    <div id="display">      </div>
</body>
</html>

js如下：

var nameinput = document.getElementById("name").value;
var dateinput = document.getElementById("date").value;
var locationinput = document.getElementById("location").value;

var messageBox = document.getElementById("display");

function insert() {
   var details = [nameinput, dateinput, locationinput];

}

我无法弄清楚为什么这不存储输入。还有是否可以保存用户从选择框中输入的内容？感谢您的帮助。

【问题讨论】：

您需要通过它们的 .value 属性 inside 您的 insert() 函数从输入中获取值。（您当前的代码在页面首次加载时获取值一次。）关于选择，给它一个 id 并以与输入元素相同的方式获取它的值。

标签： javascript html arrays forms input

【解决方案1】：

1）您无法保存该值的原因是您从点击功能之外的输入字段中获取值。您应该在执行点击后尝试获取该值。

2) 您可以通过给它一个 id 例如类别并获取它的值来获取选择框值

 var category = document.getElementById("category").value;

见以下代码： 我已经放置了代码，它在insert() 函数中获取表单值。我已将select box 和id 作为类别并使用相同的ID 来检索值。并使用innerHTML 显示了存储在display div 中的值。

function insert() {
var nameinput = document.getElementById("name").value;
var dateinput = document.getElementById("date").value;
var locationinput = document.getElementById("location").value;
  var category = document.getElementById("category").value;

var messageBox = document.getElementById("display");
   var details = [nameinput, dateinput, locationinput,category];
  messageBox.innerHTML=details[0]+','+details[1]+','+details[2]+','+details[3];
}

<form action="cgi-bin/formmail.pl" method="post">
    Name: <input id="name" type="text" name="name" value="" size="25" maxlength="50" />
    <br/>
    <br/>
    Date: <input id="date" type="date" name="date" value="" size="25" maxlength="50" />
    <br/>
    <br/>
    Location: <input id="location" type="text" name="location" value="" size="25" maxlength="50" />
    <br/>
    <br/>
    Category: <select id="category"><option value="landscape">Landscape</option>
    <option value="portrait">Portrait</option>
    <option value="conceptual">Conceptual</option>
    <option value="street">Street</option>
    <option value="fine art">Fine Art</option>
    <option value="people">People</option>
    <option value="abstract">Abstract</option>
    <option value="nature">Nature</option>
    <option value="architecture">Architecture</option>
    <option value="flower">Flower</option>
    <option value="general">General</option>
    <option value="animal">Animal</option>
    <option value="children">Children</option>
    </select>
    <br/>
    <br/>
    <input type="button" value="Change details" onclick="insert();" />
</form>
    <div id="display">      </div>

【讨论】：