使用 JavaScript 将用户输入从表单存储到记录数组中答案

【问题标题】：Using JavaScript to store user input from a form into an array of records使用 JavaScript 将用户输入从表单存储到记录数组中
【发布时间】：2019-12-22 09:29:02
【问题描述】：

这是学校的问题。我需要创建一个记录数组来存储循环用户指定次数的用户输入。

1 - 用户将输入志愿者的数量（5-10 之间）。我有那部分工作。

2 - 输入表单假设显示次数为志愿者人数。我不知道该怎么做。

3 - 用户的输入将存储在记录数组中。

4 - 将在底部显示一条消息，其中包含每个志愿者输入的信息。

我被困在 2 号上，我很肯定我也需要 3 号和 4 号的帮助。

任何帮助将不胜感激。

您可以看到我在下面编写的代码，并且我已经包含了我正在使用的两个函数的 JS 代码（validateForm() 和 getNumberOfVolunteers()）

function getNumberOfVolunteers() {
  var y = document.forms["numberOfVolunteersForm"]["numberOfVolunteers"].value;
  if (y == "") {
    alert("Number of volunteers must be filled out.");
    return false;
  }

  document.getElementById("numberOfVolunteers1").innerHTML = y;

  return false;
}

function validateForm() {
  var a = document.forms["inviteForm"]["recipientName"].value;
  if (a == "") {
    alert("Name must be filled out.");
    return false;
  }
  var b = document.forms["inviteForm"]["organizationName"].value;
  if (b == "") {
    alert("Organization name must be filled out.");
    return false;
  }

  document.getElementById("recipientName1").textContent = a;
  document.getElementById("organizationName1").textContent = b;

  return false;
}

<!DOCTYPE html>
<html lang="en-US">
<!--
<head>
   <script src="js/getNumberOfVolunteers.js"></script> 
</head>
-->

<body>
  <header>
  </header>

  <section id="numOfVolunteers">
    <form name="numberOfVolunteersForm" onsubmit="return getNumberOfVolunteers()">

      <label for="numberOfVolunteers">Number of volunteers:                
               </label>

      <input type="number" min="5" max="10" value="5" name="numberOfVolunteers" id="numberOfVolunteers" placeholder="Enter the number of volunteers" />

      <input type="submit" value="submit" id="submit1" />

    </form>
  </section>

  <section id="pageForm">
    <form action="#" name=inviteForm onsubmit="return getVolunteerInfoIntoArray()">
      Number of Volunteers Entered: <strong><span id="numberOfVolunteers1"> </span></strong> <br/> <br/>

      <label for="recipientName">Recipient name:
                </label>
      <input type="text" name="recipientName" id="recipientName" placeholder="Enter your Recipient Name" />

      <label for="organizationName">Organization name:
                </label>
      <input type="text" name="organizationName" id="organizationName" placeholder="Enter your Organization Name" />

      <input type="submit" value="submit" id="submit2" onclick="validateForm" />
    </form>
  </section>

  <article id="placeholderContent">
    Hello <span id="recipientName1"></span>!
    <br/>
    <br/> You have been invited to volunteer for an event held by <span id="organizationName1"></span>
  </article>


  <script>
    var volunteerArray = [];

    function getVolunteerInfoIntoArray() {
      var volCount;
      for (volCount = 5; volCount < getNumberOfVolunteers1.length; volCount++);

      document.getElementById('recipientName');
      document.getElementById('organizationName');

      volunteerArray.push([recipientName.value, organizationName.value]);
    }
  </script>
</body>

</html>

我需要多次显示输入表单和文章。并将所有输入存储在一个数组中。

【问题讨论】：

你的预期输出是什么？
进行了编辑，以便可以运行您的示例并修复一些 JS 错误。根据经验，请始终检查浏览器控制台是否存在 JS 错误。在大多数浏览器中，可以通过在键盘上按 F12 访问浏览器控制台

标签： javascript html arrays function loops

【解决方案1】：

这是你想要做的吗？希望这会有所帮助，即使它不是你想要的哈哈哈

<!DOCTYPE html>
<html lang="en-US">
<head>
<style>
    .numberofvolunteers,
    .all-volunteers{
        padding:10px;
    }
    input,button{
        margin:3px;
    }
    span{
        font-size:12px;
        padding:10px 10px;
    }
</style>
</head>
<body>
    <div class="numberofvolunteers">
        <input type="number" id="volunteers" placeholder="Enter No. of volunteers"><button onclick="createVolunteerForm()">Submit</button>
    </div>
    <div id="all-volunteers">

    </div>
    <span id="array"></span>
    <script>
        var volunteerArray = [];

        function createVolunteerForm(){
            volunteerArray = [];
            var numberofvolunteers = document.getElementById("volunteers").value;
            var content = "";
            if(parseInt(numberofvolunteers) < 5 || parseInt(numberofvolunteers) > 10){
                alert("No. of volunteer should be 5 to 10");
            }
            else{
                for(var i = 0; i < parseInt(numberofvolunteers); i++){
                    content += createForm(i);
                }
            }
            document.getElementById("all-volunteers").innerHTML = content;
        }

        function createForm(index){
            var content = ' <div id="volunteer-div-'+index+'">'+
                                '<div id="volunteer-form-'+index+'">'+
                                    '<input type="text" id=recipient-'+index+' placeholder="Enter recipient name">'+
                                    '<input type="text" id=organization-'+index+' placeholder="Enter organization name">'+
                                    '<button id="submit-'+index+'" onclick="displayMessage('+index+');addToArray('+index+');">submit</button>'+
                                '</div>'+
                                '<span id="message-'+index+'"></span>'+
                            '</div>';
            return content;
        }

        function displayMessage(index){
            var message = "Hello " + document.getElementById("recipient-"+index).value + " your organization is " + document.getElementById("organization-"+index).value;
            document.getElementById("message-" + index).innerHTML = message;
        }

        function addToArray(index){
            volunteerArray.push({recipient : document.getElementById("recipient-"+index).value , organization : document.getElementById("organization-"+index).value});
            document.getElementById("array").innerHTML = JSON.stringify(volunteerArray);
        }
    </script>
</body>
</html>

【讨论】：