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

How to get the value of all inputs in a form

提问by Strannik

Code:

代码：

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

In order to get an input's value, we can use its id, for example alert($("#test5").val()), but how to get the input value sequentially from the beginning of the form when we do not know the idof the input?

例如，为了获取输入的值，我们可以使用它的id，alert($("#test5").val())但是当我们不知道输入的值时，如何从表单的开头开始依次获取输入值id？

For my test code I can get value using code:

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

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

Does anyone have any ideas about how to get values when we don't know an input's id?

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

回答by zigdawgydawg

Try:

尝试：

$('form').serialize();

or:

或者：

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

回答by Eric H.

Looks like you are using jQuery.

看起来您正在使用 jQuery。

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

this yields an array that looks like:

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

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

See jQuery serializeArray.

请参阅jQuery serializeArray。

回答by zipher

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

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

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

回答by Chris Baker

There are a number of options.

有多种选择。

By Tag

按标签

Use $('input')to get all inputs on the entire page. This is not constrained to any specific form.

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

Combined Selectors

组合选择器

You can combine selectors, $('input,select')

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

Try it: http://jsfiddle.net/s5jgd/

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

By Tag, within element

按标签，在元素内

You can use findto retrieve all inputs from a specific element. For example:

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

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

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

You can also use this approach with combined selectors:

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

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

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

Using the form.elementscollection

使用form.elements集合

There is a collection of elements, accessed with $('#myForm').elements

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

By giving all elements a class

通过给所有元素一个类

This is the most flexible option, use $('.myElementClass')

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

Serialize

连载

jQuery provides a method for serializing a form's data; it will give you a list of all the elements in a string format that you can use for requests.

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

$('#myForm').serialize()outputs (for example) this url encoded string: myElementA=my+input&myElementB=my+input+c&myElementC=my+input+c

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

$('#myForm').serializeArray()is similar, but instead of a string, you get an object, with the form element names as keys corresponding to the current values. It would look like this:

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

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

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

Conclusion

结论

All told, this is basic jQuery usage. I recommend sitting down with the manual and some tutorials to expand your jQuery-foo.

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

Documentation

文档

• jQuery Basics - http://jqfundamentals.com/chapter/jquery-basics
• jQuery.find- http://api.jquery.com/find/
• jQuery.serialize- http://api.jquery.com/serialize/
• Using AJAX and jQuery to submit a form (see examples) - http://api.jquery.com/jQuery.post/

• 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/

回答by Andrew Grothe

You can use the jQuery each()function

您可以使用 jQueryeach()函数

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

回答by Matt Millican

Give the forman id (eg. test-form) and then you can do:

给出form一个 id（例如test-form），然后您可以执行以下操作：

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

回答by Frédéric Hamidi

If you want an array of values, you can project them from the <input>elements through map()chained into get():

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

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

回答by David

Several ways, I imagine, depending on what you're going to do with it.

我想有几种方法，这取决于你打算用它做什么。

For example, you can select all of the inputs in the form:

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

$('form input')

This would return an array of jQuery objects representing all of the inputs. Then you can loop through that array and get the .val()of each one.

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

Another option might be to serialize the whole form into a JSON object:

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

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

Then you can manipulate that JSON object (data) however you want or pull values from it as needed.

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

回答by tymeJV

You can do:

你可以做：

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

回答by pethel

Something similiar to this should work.

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

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

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