How to get all input fields from a form in jQuery?

Question

Possible Duplicate:
Obtain form input fields using jQuery?

I have a form with many input fields.

What is the easiest way to get all the input fields of that form in an array?

Or the Object in Key:Value pair

Do you want to get references to the DOM elements or values of the fields? Are the input fields all of the same type (tag) or different ones? — Felix Kling, Oct 12 '12 at 10:32

score 5 · Answer 1 · edited May 23 '17 at 12:34

5

Use the serializeArray() jQuery function:

var fields = $('#formID').serializeArray();

To get an associative array of the data (a JSON Object with name/value mappings), have a look at the code here: https://stackoverflow.com/a/1186309/349012

edited May 23 '17 at 12:34

Community

1
1

answered Oct 12 '12 at 10:32

manavo

1,839
2
14
17

Thanks. But the solution is not giving me the array specifically the associative ones. But surely helped me to reach the point, i was looking for – Swatantra Kumar Oct 12 '12 at 10:58
So you wanted to create an associative array of keys -> values? (essentially a JSON Object of them?) If so, have a look at this: http://stackoverflow.com/a/1186309/349012 . It uses the serializeArray function as well, just reformats the data! – manavo Oct 12 '12 at 11:05

score 3 · Accepted Answer · answered Oct 12 '12 at 11:05

Object of all the inputs:-

$("form#formId :input").each(function(){
    var input = $(this); // A jquery object of the input
});

or

$('#formId').submit(function() {
    // get the array of all the inputs 
    var $inputs = $('#formId :input');

    // get an associative array of the values
    var values = {};
    $inputs.each(function() {
        values[this.name] = $(this).val();
    });
});

This one returns the Key:Value pair -

var values = {};
$.each($('#formId').serializeArray(), function(i, field) {
    values[field.name] = field.value;
});

score 1 · Answer 3 · answered Oct 12 '12 at 10:33

1

This is pretty easy:

$('input','#formId')

or

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

answered Oct 12 '12 at 10:33

Jen-Ya

328
4
14

2

find api is quite expensive, and it is hanging up my browser... I have couple of tons inputs – Swatantra Kumar Oct 12 '12 at 10:55

score -2 · Answer 4 · edited Oct 12 '12 at 23:33

-2

Use: var allInputs = $(":input");

edited Oct 12 '12 at 23:33

Sam

86,580
20
181
179

answered Oct 12 '12 at 10:36

Anupam

1

This will return all the input type no matter, which form they belongs to – Swatantra Kumar Oct 12 '12 at 10:54
I've seen this get new developers confused. Needs a better selector. – Clutch Jul 25 '13 at 18:41

How to get all input fields from a form in jQuery?

4 Answers4