javascript - 在一个表单字段中获取多个用户输入

Question

我正在尝试创建一个表单字段，询问用户访问过哪些国家/地区，并将其限制为 10 个。因此，用户必须在一个表单字段中提供 10 个输入。

但是当我点击提交按钮时，它不会让用户再次输入。它只是调用显示用户输入的第一个国家/地区的函数。

如何保留用户在表单字段中输入的值，以及当用户输入所有十个国家/地区后，单击“提交”调用将显示所有国家/地区的函数？

function validateForm() {
  var repeat = new Array();
  for (i = 0; i < 10; i++) {
    var x = document.forms["form1"]["countries"].value;


    repeat.push(x);
  }
  document.write(repeat);
}

<form id="form1">
  Enter the countries:
  <input type="text" id="countries"><br><br>
  <input type="button" onclick="validateForm()" value="Click Me!">

它会继续显示用户已输入 10 次的一个国家，而不是让用户输入 10 个国家，然后单击提交时显示。

Answer 1

这将执行您所描绘的内容。我认为这不是向用户询问 10 个项目的好方法，因为没有关于他们输入了多少项目的反馈，也没有在输入后编辑项目的能力，也没有清除列表以输入的方法还有10个。此外，这永远不会真正提交列表。但这满足了所述要求:

var repeat = [];

function validateForm() {
  var countries = document.getElementById("countries");
  if (repeat.length < 10) {
    var x = countries.value;
    repeat.push(x);
    countries.value = "";
    countries.focus();
  }
  if (repeat.length === 10) {
    var hid = document.getElementById("list");
    hid.value = repeat.join('|');
    console.log(hid.value);
    var ul = document.getElementById("display");
    ul.innerHTML = "";
    for (var i = 0; i < 10; i++) {
      ul.innerHTML += `<li>${repeat[i]}</li>`;
    }
    document.getElementById("done").style.display = "block";
  }
}

window.onload = function() {
  document.getElementById("click").addEventListener("click", validateForm);
};

<form id="form1">
  Enter the countries:
  <input type="text" id="countries"><br><br>
  <input type="button" id="click" value="Click Me!">
  <input type="hidden" id="list" name="listOfCountries">
</form>
<br>
<div id="done" style="display:none">
  Countries entered:
  <ul id="display"></ul>
</div>

请注意，隐藏字段 listOfCountries 将包含 10 个国家/地区的列表，由管道符号“|”分隔。您可以将其发布到服务器。