将HTML表单信息存储到JS数组中 [英] Storing Html Form Information in to an JS Array
问题描述
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta name="description" content="">
<meta name="author" content="">
<link rel="shortcut icon" href="">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap-theme.min.css">
<style>body{padding-top:50px;}.starter-template{padding:40px 15px;text-align:center;}</style>
<link rel="stylesheet" type="text/css" href="createdesign.css">
</head>
<body>
<nav class="navbar navbar-inverse navbar-fixed-top" role="navigation">
<div class="container">
<div class="navbar-header">
<button type="button" class="navbar-toggle" data-toggle="collapse" data-target=".navbar-collapse">
<span class="sr-only">Toggle navigation</span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
</button>
<a class="navbar-brand" href="Newsfeed.html">NPSS Announcements</a>
</div>
<div class="collapse navbar-collapse">
<ul class="nav navbar-nav">
<li><a href="Newsfeed.html">Newsfeed</a></li>
<li><a href="Create.html">Create</a></li>
<li><a href="Calender.html">Calender</a></li>
<li><a href="login.html">Logout</a></li>
</ul>
</div><!--.nav-collapse -->
</div>
</nav>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/js/bootstrap.min.js"></script>
<h1>Create A New Announcement</h1>
<form action="action_page.php">
Announcement Title: <input type="text" name="ATitle" size="50">
<br>
Descritption:<br>
<br>
<input type="radio" name="sex" value="male" checked>Male
<input type="radio" name="sex" value="female" checked>Female
<br>
When is the Meeting?<input type="datetime-local" name="Awhen" </input>
<br>
Where is the Meeting<input type="text" name="Awhere"></input>
</form>
</body>
</html>
我正尝试放置的所有信息，例如通告标题，说明，性别和时间放入一个数组（JS），这样我以后就可以检索它们并在其他位置显示信息。我是一名初学者，所以请解释一下！感谢您的帮助！
I'm trying to put all the information from the , like the Announment Title, Description, Gender and time into an array(JS), so I can retrieve them later and display the information else where. I'm a beginner programmer so please explain! I appreciate the Help!
推荐答案
您需要了解的基本知识是，您可以访问这些元素并获取它们的值。然后，您可以将它们放入数组。这是获取单个元素的值并将其放入数组的方法。
The basic you need to understand is that you can access these elements and get their values. Then you can put them in to an array. Here is how you get the value of a single element and put it in to an array.
var myFormData = []; //declare an array
var value1 = document.getElementById("myTextInput").value; //get the value of an element by it's id
myFormData.push(value1); //put to the array
接下来，有一些快捷方式可以同时对多个元素执行此操作。
Next, there are shortcuts to perform this on multiple elements at once.
您可以向所有表单字段添加一些类，例如 myInputs ，并使用查询选择器获取它们
You can add some class, lets say myInputs to all your form fields and use a query selector to get them all at once to an array-like-list.
这里是如何按其类选择多个元素。
Here is how you select multiple elements by their class.
var myFormInputs = document.getElementsByClassName("myInputs")
现在 myFormInputs 是一个类似数组的列表。
Now myFormInputs is an array-like-list.
您可以调用 filter 函数在 myFormInputs 上并获取其值。
You can call filter function on myFormInputs and get their values.
var myFormData = Array.prototype.filter.call(myFormInputs, function(anElement) {
return anElement.value;
})
每个元素都会调用内部函数-因此我们可以返回它的值。现在，使用所有这些值创建 myFormData 数组。
The inner function is called per element - so we can return the value of it. myFormData array is now created with all these values.
有很多更短的方法可以做到这一点。您可以使用 JQuery 之类的优雅库来快速开发和缩短代码。但以上是所有要素的基础。
There are lot of shorter methods to do it. You can use some elegant libraries like JQuery for fast development and shorter code. But above are the building blocks of all.
不要忘记学习 JS对象。
这篇关于将HTML表单信息存储到JS数组中的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
