使用jQuery从多个输入中获取值数组答案

【问题标题】：Get array of values from multiple inputs using jQuery使用jQuery从多个输入中获取值数组
【发布时间】：2012-04-09 04:31:14
【问题描述】：

有人可以告诉我如何从多个输入字段中获取值吗？

我有一个包含多个输入的列表，如下所示：

<li>
<label>Additional Title: </label><input type='text' name='additionaltitlename' ... />
</li>
<li>
<label>Additional Title: </label><input type='text' name='additionaltitlename' ... />
</li>

我有一个 Javascript 解决方案（在表单提交时）：

...
var extratitles = document.getElementsByName('additionaltitlename'); 
var str = '';
      for (var i = 0; i < extratitles.length; i++) { 
      str = str + '|' + extratitles.item(i).value;
    } 
}

我如何在 JQuery 中做同样的事情？

【问题讨论】：

标签： javascript jquery

【解决方案1】：

具有相同名称的两个输入是无效的。如果你想这样做，你可以使用<input name="titles[]">

你可以试试这个：

<input name="titles[]">
<input name="titles[]">
<button>submit</button>

有了这个 jQuery

// click handler
function onClick(event) {
  var titles = $('input[name^=titles]').map(function(idx, elem) {
    return $(elem).val();
  }).get();

  console.log(titles);
  event.preventDefault();
}

// attach button click listener on dom ready
$(function() {
  $('button').click(onClick);
});

See it working here on jsFiddle

编辑

此答案为您提供数组中的标题，而不是使用 | 分隔符的字符串。就个人而言，我认为这更有用。

如果您只是提交表单并且想要支持多个值，请使用其他答案中描述的.serialize 方法

【讨论】：

为什么不使用this.value？每一个简单的操作都需要使用jQuery吗？
@IulianOnofrei，you tell me if it's necessary。使用像 jQuery 这样的库的目的是 a) 减轻对大多数极端情况的关注，b) 提供一致、直观的 api。是的，对于 INPUT 元素，您可以非常可靠地使用 this.value，但是对于 SELECT 之类的内容会有所不同。无论哪种方式，jQuery 都不在乎，它为您提供了一个直观的 .val 方法，可以在任何情况下工作。
@IulianOnofrei，此外，我提供了使用 jQuery 并使用 jQuery 成语编写的答案因为这个问题被标记为jquery。如果这是一个普通的 JavaScript 问题，我的回答会完全不同。
啊哈，我明白了，谢谢。我对这种jQuery 的狂热感到复杂，我不知道即使value 也有极端情况。
"有两个同名输入是无效的。"也许，我误解了，但这post 似乎不同意。此外，不使用titles[] 作为两个输入的名称与名称必须唯一的声明相矛盾。

【解决方案2】：

使用jQuery原生的serialize函数：

var data = $('input[name="additionaltitlename"]').serialize();

docs

.serialize() 方法以标准 URL 编码表示法创建文本字符串。它对表示一组表单元素的 jQuery 对象进行操作。

【讨论】：

如果他想用 javascript 进行额外处理，这并不能真正将标题置于可行的形式
@macek。他写道，他想通过 ajax 请求提交值。 serialize() 是原生解决方案。

【解决方案3】：

在 jquery 中很容易。你可以这样做：

types = [];
$("input[name='additionaltitlename']").each(function() {
    types.push($(this).val());
});
console.log(types);

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<input type="text" id="additionaltitlename1" name="additionaltitlename" class="form-control" value="abc">
<input type="text" id="additionaltitlename2" name="additionaltitlename" class="form-control" value="xyz">

【讨论】：

哇，我还在得到答案 :) 谢谢。我现在使用 JS 框架来做这样的事情。

【解决方案4】：

除了@gdoron 或@macek 的答案可能是要走的路外，我想补充一点，您发布的代码的所有问题是您有一个} 太多。这行得通（尽管它仍有改进的余地）：

$('#getpreviewbutton').click(function(){

    var extratitles = document.getElementsByName('additionaltitlename'); 
    var str = '';
          for (var i = 0; i < extratitles.length; i++) { 
             str = str + '|' + extratitles.item(i).value;
          }

});

见：http://jsfiddle.net/8XJcc/

我不知道您使用的是哪种浏览器，但使用 Firebug 或 Chrome 开发工具之类的东西可以非常方便地发现此类简单错误。请参阅 this reference（适用于 Chrome）或 this one（适用于 Firefox）。甚至 IE 也有 - 只需按 F12。

【讨论】：

【解决方案5】：

意思：

str = '';
$("input[type='text']").each(function() {
str = str + '|' + $(this).val();
});

或

str = '';
$("input[name='additionaltitlename']").each(function() {
str = str + '|' + $(this).val();
});

?

【讨论】：