将 Html 表单信息存储到 JS 数组中[关闭]答案

【问题标题】：Storing Html Form Information in to an JS Array [closed]将 Html 表单信息存储到 JS 数组中[关闭]
【发布时间】：2015-11-06 15:46:01
【问题描述】：

 <!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）中，以便稍后检索它们并将信息显示在其他位置。我是初学者，请解释一下！我很感激帮助！

【问题讨论】：

标签： javascript html arrays

【解决方案1】：

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

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 来实现快速开发和更短的代码。但以上是所有的构建块。

也别忘了了解JS Objects。

【讨论】：

【解决方案2】：

由于您使用的是 jQuery，我会看看 .serialize()。这可能是将表单数据放入 JavaScript 数组的最简单方法。

https://api.jquery.com/serialize/

您也可以构建自己的数组，但我认为既然您是“初学者”，serialize 将为您完成所有这些工作。

【讨论】：

感谢您的回复，但我想远离使用 jQuery

【解决方案3】：

当您支持 IE10+ 时，您应该真正研究一下FormData-object，这真的很酷。它拥有您错过的所有支持。现在您可以发送一个自定义的不存在的表单，而无需使用 jQuery 创建表单，例如：

var form = new FormData();
form.append( 'uploaded_file', $('input[type=file]')[0].files[0] );
form.append( 'description', 'I am a cool file, you know...' );

$.ajax({
    url: 'http:/whatev.er/',
    type: 'POST',
    processData: false,
    contentType: false,
    dataType: 'json',
    success: function(data) {

        alert('I just uploaded a file with an AJAX-call so I do not have to refresh the page! Wooo!');
    }
});

【讨论】：

感谢您的评论！我一定要调查一下

【解决方案4】：

你可以使用jQuery的.serializeArray()。

这是将表单数据转换为数组/对象的方法：

$("#formid").serializeArray();

这就是您可以将数据放回表单的方式：

$.each(form_data, function(n, el) {
   // n is just a number identifying it
   $("#testform input[name='"+el.name+"']").val(el.value);
});

工作演示：https://jsfiddle.net/egbar7r5/

【讨论】：

感谢您的回复，但我想远离使用 jQuery