Question

我有这种动态形式，我将输入的每个值都放在一个数组中。问题是我无法在javascript函数中获取所有这些项目。

我的HTML格式：

<form>
<input type="text" placeholder="Name 1" id="myInputs[]">
<input type="text" placeholder="Name 2" id="myInputs[]">
<input type="text" placeholder="Name 3" id="myInputs[]">
<input type="text" placeholder="Name 4" id="myInputs[]">
<input type="text" placeholder="Name 5" id="myInputs[]">
<input type="text" placeholder="Name 6" id="myInputs[]">
<button onclick="process()">Next</button>
</form>

我的脚本功能

function process(){
    var name = document.getElementById("myInputs[]").value;
    var name1 = name[0];
}

在这个函数中，我得到第一个数组条目，但这只返回第一个条目的第一个字符。

Answer 1

ID应始终是唯一的。

id全局属性定义唯一标识符（ID），该标识符在整个文档中必须是唯一的。它的目的是在链接（使用片段标识符），脚本或样式（使用CSS）时标识元素。

您应该考虑改用name="myInputs[]"。

这样你就可以做document.getElementsByName("myInputs[]")并迭代NodeList。

＆＃13;

function process() {
  var allInputs = document.getElementsByName("myInputs[]");
  var name1 = allInputs[0].value; // This is the Value of the first Input
}

＆＃13;

<form>
  <input type="text" placeholder="Name 1" name="myInputs[]">
  <input type="text" placeholder="Name 2" name="myInputs[]">
  <input type="text" placeholder="Name 3" name="myInputs[]">
  <input type="text" placeholder="Name 4" name="myInputs[]">
  <input type="text" placeholder="Name 5" name="myInputs[]">
  <input type="text" placeholder="Name 6" name="myInputs[]">
  <button onclick="process()">Next</button>
</form>

＆＃13;

Answer 2

改为使用CSS查询。请注意，您不应该有多个具有相同ID的项目，如果您愿意，它们可以具有相同的name。这通常用于将项目作为数组发送到服务器，并且只能被某些服务器处理框架识别

＆＃13;

function process(){
  var names = document.querySelectorAll("form [name='myInputs[]']");
  var name1 = names[0].value;
  console.log('First name is' + name1);
}

＆＃13;

<form>
<input type="text" placeholder="Name 1" name="myInputs[]">
<input type="text" placeholder="Name 2" name="myInputs[]">
<input type="text" placeholder="Name 3" name="myInputs[]">
<input type="text" placeholder="Name 4" name="myInputs[]">
<input type="text" placeholder="Name 5" name="myInputs[]">
<input type="text" placeholder="Name 6" name="myInputs[]">
<button onclick="process()">Next</button>
</form>

＆＃13;

Answer 3

首先，ID应该是唯一的。

然后，代码应该是这样的：

＆＃13;

function process(){
     var name = document.getElementsByClassName("myInputs[]");
     alert(name[0].placeholder);
}

＆＃13;

<form>
  <input type="text" placeholder="Name 1" class="myInputs[]">
  <input type="text" placeholder="Name 2" class="myInputs[]">
  <input type="text" placeholder="Name 3" class="myInputs[]">
  <input type="text" placeholder="Name 4" class="myInputs[]">
  <input type="text" placeholder="Name 5" class="myInputs[]">
  <input type="text" placeholder="Name 6" class="myInputs[]">
  <button onclick="process()">Next</button>
</form>

＆＃13;

从javascript

3 个答案: