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

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次的一个国家，而不是让用户输入十个国家然后在点击提交时显示。

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 个国家/地区的列表，由管道符号“|”分隔。您可以将其发布到服务器。

Answer 2

您可以对国家/地区使用全局数组并在数组中存储十个国家/地区。

function enterCountry() {
    var input = document.getElementById('country');
    if (input.value && countries.length < 10) {
        countries.push(input.value);
        input.value = '';
        input.placeholder = 'insert ' + (10 - countries.length);
    }
    if (countries.length === 10) {
        input.placeholder = 'ready';
        document.getElementById('allCountries').innerHTML = countries.join(', ');
    }
}
var countries = [];

<form id="form1">
Enter the countries:
<input type="text" id="country" placeholder="insert 10"><br><br>
<input type="button" onclick="enterCountry()" value="Click Me!">
</form>
<div id="allCountries"></div>

Answer 3

嘿，您可以在使用 jquery 提交时获得多个输入值

$( "form" ).on( "submit", function( event ) {
  event.preventDefault();
  console.log( $( this ).serialize() );
});