Question

我在尝试将其转换为数组时遇到问题。我不完全理解如何从表单中获取输入并将其保存在数组中。

我的项目声明：不要将输入保存在一组变量中，然后将它们放在一个数组中。使用数组作为数据保存变量的集合。（这就是数据结构适用于。）

我已经找了最近2个小时试图寻找帮助我的东西。我必须在JavaScript中执行此项目，但继续查找jquery并且我不太确定如何将其转换为Javascript

关于如何获取表单输入并将其保存在数组中的任何建议？

这只是我项目的一小部分。我刚刚接受了第一个函数和附加到函数的HTML。

代码段中的代码。

＆＃13;

   function getID() {
       var studentID = new Array();
       studentID = document.forms["getFormInfo"]["txtStudentID"].value;
       var numberOnly = /^[0-9]+$/;

       //Checks for a null/blank within Student ID: field.
       if (studentID.length == 0) {
         document.getElementById('divAllField').style.display = '';
         document.forms["getFormInfo"]["txtStudentID"].focus();
         return false;
       } //End of if statement
       else {
         if (studentID.length == 8 && studentID.match(numberOnly)) {
           //Run the next function
           getFirstName();
         } //End of else/if statement
         else {
           //Show Error Message
           document.getElementById('divStudentID').style.display = "";
           //Focus on input field with the error.
           document.forms["getFormInfo"]["txtStudentID"].focus();
         } //end of else/if/else statement
       } //End of else statement
     } //End of function getID()

＆＃13;

   h1 {
     text-align: center;
     color: teal;
   }
   table {
     border-spacing: 8px;
     border: 2px solid black;
     text-align: justify;
   }
   th {
     text-align: center;
     padding: 8px;
     color: blue;
     font-size: 125%;
   }
   td {
     padding: 5px;
   }
   input,
   select {
     width: 200px;
     border: 1px solid #000;
     padding: 0;
     margin: 0;
     height: 22px;
     -moz-box-sizing: border-box;
     -webkit-box-sizing: border-box;
     box-sizing: border-box;
   }
   input {
     text-indent: 2px;
   }
   label {
     float: left;
     min-width: 115px;
   }
   div {
     padding: 3px;
     color: red;
     font-size: 80%;
   }

＆＃13;

<!DOCTYPE html>
<html lang="en">

<head>
  <!-- Begining of the header -->

</head>
<!-- End of the header -->

<body>
  <!-- Everything in the <body> </body> displays on the webpage -->

  <form id="getFormInfo">
    <!-- Creates a form with an ID -->
    <table id="tableInfo">
      <!-- Creates a table within the form -->

      <!-- Creates a table header within the form and table -->
      <th>User Information</th>


      <!-- Error Message for all fields if they are null/blank -->
      <tr>
        <td><strong><div id="divAllField" style="display: none;">
              Please make sure all input boxes are filled out.
              </div></strong>
        </td>
      </tr>


      <!-- Student ID Input -->
      <tr>
        <td><strong><label>Student ID:</label></strong>
          <input type="text" name="txtStudentID" maxlength="8" placeholder="8 Digit ID" value="00149371" required>
          <!-- Error Message for Student ID -->
          <strong><div id="divStudentID" style="display: none;">
              Please enter your 8 Digit Student ID. (Whole Numbers Only)</br>
              Example: 00123456
              </div></strong>
        </td>
      </tr>

      <tfoot>
        <td>
          <input type="button" onclick="getID();" value="Submit">
      </tfoot>
      </td>

    </table>
    <!-- End of tableInfo -->
  </form>
  <!-- End of getInfo -->

</body>

</html>

＆＃13;

任何人都知道如何保存表单中的输入并将其保存到数组中？

请帮助，我已经在这个项目上工作了10个多小时。

Answer 1

使用 push 功能将项目添加到数组中。

function getID() {
   var studentID = [];
   var tstStudentIdVal = document.forms["getFormInfo"]["txtStudentID"].value
   studentID.push(tstStudentIdVal);
   var numberOnly = /^[0-9]+$/;

   //Checks for a null/blank within Student ID: field.
   if (tstStudentIdVal.length == 0) {
     document.getElementById('divAllField').style.display = '';
     document.forms["getFormInfo"]["txtStudentID"].focus();
     return false;
   } //End of if statement
   else {
     if (tstStudentIdVal.length == 8 && tstStudentIdVal.match(numberOnly)) {
       //Run the next function
       getFirstName();
     } //End of else/if statement
     else {
       //Show Error Message
       document.getElementById('divStudentID').style.display = "";
       //Focus on input field with the error.
       document.forms["getFormInfo"]["txtStudentID"].focus();
     } //end of else/if/else statement
   } //End of else statement
 } //End of function getID()

Answer 2

如果您不能使用jQuery，我认为最优雅的解决方案是使用querySelectorAll()获取所有输入的nodeList，然后use a combination Function.prototype.call()和Array.prototype.map() {3}}将输入数组转换为您自己设计的数组。

在下面的代码段中，生成的数组中的每个对象都有name和value，这些对象直接来自您表单中的文本输入（您的问题不是很清楚）生成的数组应该如何看。）

＆＃13;

function getID() {
  var nodes = document.forms["getFormInfo"].querySelectorAll("input[type='text']");
  var array = [].map.call(nodes, function(item) {
    return {name : item.name, value : item.value};
  });
  console.log(array);
}

＆＃13;

<form id="getFormInfo">
  <input type="text" name="txtStudentID"/>
  <input type="text" name="firstName"/>
  <input type="text" name="lastName"/>
  <input type="button" onclick="getID();" value="Submit"/>
</form>

＆＃13;

从表单中获取输入并将其保存到数组中

2 个答案: