How to get the value of all inputs in a form

Question

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 id of the input?

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?

Solution 1

Try:

$('form').serialize();

or:

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

Solution 2

Looks like you are using jQuery.

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

this yields an array that looks like:

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

See jQuery serializeArray.

Solution 3

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

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

Solution 4

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.

Combined Selectors

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

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

By Tag, within element

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

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

You can also use this approach with combined selectors:

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

Using the form.elements collection

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

By giving all elements a class

This is the most flexible option, use $('.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.

$('#myForm').serialize() outputs (for example) this url encoded string: 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:

{"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.

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/

Solution 5

You can use the jQuery each() function

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

View more solutions

Comments

[Chris Baker]

@Strannik Oops, missing a 't' in there! Should be fixed.

[Ceasar Bautista]

The second snippet will return values for unchecked checkboxes, which may be undesirable.