如何获取表单中所有输入的值

Question

代码：

<form name="newform" action="test.php" method="post"  class="form-horizontal input-prepend" id="newform">

  <div class="form-group">
    <label class="control-label" for="test1">test1</label>
    <input type="text" name="test1" class="form-control" id="test1" placeholder="">
  </div>

  <div class="form-group">
    <label class="control-label" for="test2">test2</label>
    <input type="text" name="test2" class="form-control" id="test2" placeholder="">
  </div>

<div class="form-group">
    <label class="control-label" for="test3">test3</label>
    <input type="text" name="test3" class="form-control" id="test3" placeholder="">
  </div>

<div class="form-group">
    <label class="control-label" for="test1">test4</label>
    <input type="text" name="test4" class="form-control" id="test4" placeholder="">
  </div>

<div class="form-group">
    <label class="control-label" for="test5">test5</label>
    <input type="text" name="test5" class="form-control" id="test5" placeholder="">
  </div>

</form>

为了得到一个输入的值，我们可以使用它的id，例如alert($("#test5").val())，但是在不知道id的情况下如何从表单的开头依次获取输入值输入？

对于我的测试代码，我可以使用代码获得价值：

var value1 = $("test1").val();
var value2 = $("test2").val();
var value3 = $("test3").val();
var value4 = $("test4").val();
var value5 = $("test5").val();

当我们不知道输入的id 时，是否有人对如何获取值有任何想法？

Answer 1

试试：

$('form').serialize();

或：

var values = [];
$('input').each(function() {
    values.push($(this).val());
});

Answer 2

看起来你正在使用 jQuery。

 $('form[name="newForm"]').serializeArray();

这会产生一个如下所示的数组：

[{name:'test1', value:'value1'},...]

见jQuery serializeArray。

Answer 3

jsFiddle：http://jsfiddle.net/Yw4Hc/3/

$('input.form-control').each(function() {
    alert($(this).attr('name') + " = " + $(this).val()); 
});

Answer 4

你可以使用jQuery的each()函数

$(".form-control").each(function(){
  var value = $(this).val();
});

Answer 5

有很多选择。

按标签

使用$('input') 获取整个页面上的所有输入。这不限于任何特定的形式。

组合选择器

你可以组合选择器，$('input,select')

试试看：http://jsfiddle.net/s5jgd/

按标签，在元素内

您可以使用find 检索来自特定元素的所有输入。例如：

$('#myForm').find('input');

您也可以将此方法与组合选择器一起使用：

$('#myForm').find('input,select');

使用form.elements 集合

有一个元素集合，通过$('#myForm').elements访问

通过给所有元素一个类

这是最灵活的选项，使用$('.myElementClass')

序列化

jQuery 提供了一种序列化表单数据的方法；它将以字符串格式为您提供可用于请求的所有元素的列表。

$('#myForm').serialize() 输出（例如）这个 url 编码的字符串：myElementA=my+input&myElementB=my+input+c&myElementC=my+input+c

$('#myForm').serializeArray() 类似，但不是字符串，而是一个对象，其中表单元素名称作为与当前值对应的键。它看起来像这样：

{"myElementA":"my input", "myElementB":"my input b", "myElementC":"my input c"}

结论

总而言之，这是基本的 jQuery 用法。我建议坐下来阅读手册和一些教程来扩展您的 jQuery-foo。

文档

• jQuery 基础 - http://jqfundamentals.com/chapter/jquery-basics
• jQuery.find - http://api.jquery.com/find/
• jQuery.serialize - http://api.jquery.com/serialize/
• 使用 AJAX 和 jQuery 提交表单（参见示例）-http://api.jquery.com/jQuery.post/

Answer 6

给form 一个id（例如test-form）然后你可以这样做：

var formValues = $('#test-form').serialize();

Answer 7

如果您想要一个值数组，您可以将它们从<input> 元素投影到链接到get() 的map()：

var values = $("input[type=text]").map(function() {
    return this.value;
}).get();

Answer 8

我想有几种方法，具体取决于您要使用它做什么。

例如，您可以选择表单中的所有输入：

$('form input')

这将返回一个代表所有输入的 jQuery 对象数组。然后你可以遍历该数组并获取每个数组的.val()。

另一种选择可能是将整个表单序列化为 JSON 对象：

var data = $('form').serialize();

然后，您可以随意操作该 JSON 对象 (data)，也可以根据需要从中提取值。

Answer 9

你可以这样做：

var inputValues = $("#newform .form-group input:text").map(function() {
    return this.value;
}).get();

Answer 10

与此类似的东西应该可以工作。

var value5 = $("#newform").find("input").get(5).val();