CODEWITHSUNDEEP
jqueryformsinput
Strannik
Strannik

Reputation: 466

How to get the value of all inputs in a form

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?

Upvotes: 3

Views: 25150

Answers (10)

Chris Baker
Chris Baker

Reputation: 50592

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

Upvotes: 3

zipher
zipher

Reputation: 41

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

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

Upvotes: 3

Fr&#233;d&#233;ric Hamidi
Fr&#233;d&#233;ric Hamidi

Reputation: 262919

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

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

Upvotes: 1

tymeJV
tymeJV

Reputation: 104775

You can do:

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

Upvotes: 0

Eric H.
Eric H.

Reputation: 7014

Looks like you are using jQuery.

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

this yields an array that looks like:

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

See jQuery serializeArray.

Upvotes: 3

zigdawgydawg
zigdawgydawg

Reputation: 2046

Try:

$('form').serialize();

or:

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

Upvotes: 9

Matt Millican
Matt Millican

Reputation: 4054

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

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

Upvotes: 1

Andrew Grothe
Andrew Grothe

Reputation: 2374

You can use the jQuery each() function

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

Upvotes: 2

David
David

Reputation: 218818

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.

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

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

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

Upvotes: 0

pethel
pethel

Reputation: 5537

Something similiar to this should work.

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

Upvotes: -1

Related Questions