Question

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

我有一个包含以下几个输入的列表：

<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中做同样的事情？

Answer 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方法

Answer 2

使用jQuery的原生serialize函数：

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

docs

.serialize（）方法以标准URL编码表示法创建文本字符串。它在表示一组表单元素的jQuery对象上运行。

Answer 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">

Answer 4

意思是：

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

或

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

Answer 5

除了@ 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开发工具的方法可以非常方便地发现像这样的简单错误。有关Chrome的 this reference 或Firefox的 this one 。即使IE有一个 - 只需按F12。

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

5 个答案: