如何使用JavaScript / jQuery获取文本框数组的值

Question

我有一个文本输入框的数组，就像这样：

<input type="textbox" name="mobileno[]"><br>
<input type="textbox" name="mobileno[]"><br>
<input type="textbox" name="mobileno[]"><br>

他们是在运行时使用“添加更多”按钮生成的。

我能否使用jQuery获取文本输入值并将其传递给ajax请求？

我已经创建了一个ajax请求，但无法以name=value模式获取文本输入数组的值。

- bin

---

"textbox" 不是 type 属性的正确值。您需要使用 type="text"。 - Andy E

幸运的是，“text”是默认类型，未知类型通常被视为默认类型，因此它仍然可以在大多数浏览器中正常工作。但这只是一个愉快的意外。 - cHao

Answer 1

你可以这样做：

$('input[name="mobileno[]"]').each(function(){
  alert($(this).val());
});

^= 用于查找名称以 mobileno 文本开头的元素，并且使用 each 循环遍历所有元素以获取它们的值。 更多信息：

• http://api.jquery.com/attribute-starts-with-selector/
• http://api.jquery.com/jQuery.each/

- Sarfraz

---

不需要使用“starts with selector”。在选择器中使用方括号是完全有效的：$（'input[name="mobileno[]"]'）。 - RoToRa

Answer 2

试试这个：

var text= new Array();
$("input[name='mobileno[]']").each(function(){
    text.push($(this).val());
});  

如果您警告变量文本，您将获得逗号分隔的输出。

- Murugesh

Answer 3

首先：那不是“文本框数组”。在HTML中没有这样的东西。它只是多个文本框，它们都恰好具有相同的名称，而该名称恰巧具有方括号。名称中的方括号在HTML中没有特殊含义。（PHP需要它们，但那是完全不同的事情）。

其次：type="textbox"是错误的。它应该是type="text"。你很幸运它能工作，因为“text”是浏览器在找到无效值（如textbox）时回退到的默认值。

如果需要以标准名称=值模式（使用&分隔）获取表单的值，jQuery提供了表单的serialize方法：

alert($("#your-form-id").serialize());

http://api.jquery.com/serialize/

- RoToRa

---

我不确定在这里是否可以使用serialize()，因为name属性的值是URI编码的，所以[]变成了%5B%5D。 - Andy E

那会有影响吗？我认为这只能是一件好事。 - RoToRa

在 HTML 中并不存在数组这种数据类型，但是在 JavaScript 中却有。通常情况下，当处理元素的“数组”时，实际上你会得到一个 NodeList，但这很少会有太大的区别。 - Quentin

Answer 4

var data = $('input[name="mobileno[]"]').map(function(){
  return this.name + '=' + this.value;
}).get().join('&');
alert(data);

这将为您提供类似于mobileno[]=value&mobileno[]=value&mobileno[]=value的东西。然后，您可以在ajax请求中传递它。

- Reigel Gallarde