Question

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

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

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

＆＃13;

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);
}

＆＃13;

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

＆＃13;

它会一直显示用户输入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个国家/地区的列表，并以竖线符号“|”分隔。您可以将其发布到服务器上。

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() );
});

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

3 个答案: