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

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
– Felix Kling, Commented Oct 12, 2012 at 10:32

Community · Accepted Answer · 2017-05-23 12:34:36Z

6

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, 2017 at 12:34

CommunityBot

11 silver badge

answered Oct 12, 2012 at 10:32

manavo

1,8992 gold badges15 silver badges17 bronze badges

Sign up to request clarification or add additional context in comments.

2 Comments

Swatantra Kumar Over a year ago

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

manavo Over a year ago

So you wanted to create an associative array of keys -> values? (essentially a JSON Object of them?) If so, have a look at this: stackoverflow.com/a/1186309/349012 . It uses the serializeArray function as well, just reformats the data!

Swatantra Kumar · Accepted Answer · 2012-10-12 11:05:07Z

3

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;
});

answered Oct 12, 2012 at 11:05

Swatantra Kumar

1,3286 gold badges25 silver badges33 bronze badges

Comments

Jen-Ya · Accepted Answer · 2012-10-12 10:33:18Z

1

This is pretty easy:

$('input','#formId')

or

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

answered Oct 12, 2012 at 10:33

Jen-Ya

3184 silver badges14 bronze badges

1 Comment

Swatantra Kumar Over a year ago

find api is quite expensive, and it is hanging up my browser... I have couple of tons inputs

Sam · Accepted Answer · 2012-10-12 23:33:16Z

-2

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

edited Oct 12, 2012 at 23:33

Sam

87k21 gold badges185 silver badges180 bronze badges

answered Oct 12, 2012 at 10:36

Anupam

1

2 Comments

Swatantra Kumar Over a year ago

This will return all the input type no matter, which form they belongs to

Clutch Over a year ago

I've seen this get new developers confused. Needs a better selector.

Collectives™ on Stack Overflow

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

4 Answers 4

2 Comments

Comments

1 Comment

2 Comments

Linked

Hot Network Questions

Collectives™ on Stack Overflow

4 Answers 4

2 Comments

Comments

1 Comment

2 Comments

Linked

Related