gpt4 book ai didi

javascript - 将 Html 表单信息存储到 JS 数组中

转载 作者:行者123 更新时间:2023-12-03 08:25:30 24 4
gpt4 key购买 nike

 <!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)中,以便稍后检索它们并在其他位置显示信息。我是一名初学者程序员,所以请解释一下!我很感谢您的帮助!

最佳答案

您需要了解的基础知识是您可以访问这些元素并获取它们的值。然后你可以将它们放入一个数组中。以下是获取单个元素的值并将其放入数组的方法。

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

接下来,有一些快捷方式可以同时对多个元素执行此操作。

您可以向所有表单字段添加一些类(例如 myInputs),并使用查询选择器将它们一次性添加到类似数组的列表中。

以下是按类选择多个元素的方法。

var myFormInputs = document.getElementsByClassName("myInputs")

现在 myFormInputs 是一个类似数组的列表。

您可以在myFormInputs上调用filter函数并获取它们的值。

var myFormData = Array.prototype.filter.call(myFormInputs, function(anElement) {
return anElement.value;
})

每个元素都会调用内部函数 - 因此我们可以返回它的值。 myFormData 数组现在已使用所有这些值创建。

<小时/>

有很多更简短的方法可以做到这一点。您可以使用一些优雅的库,例如 JQuery用于快速开发和更短的代码。但以上是所有的构建 block 。

别忘了了解 JS Objects也是。

关于javascript - 将 Html 表单信息存储到 JS 数组中,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/33570492/

24 4 0
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com