jquery form elements to array

Question

I'm trying to get all form elements to array, then loop through them using jquery's $.each() function and within this function get each element's id, and title attributes.

I've tried serializeArray(), but I can only get 'name' and 'value' attributes.

I need something that collects all form elements whether it's input (regardless of the type), select, textarea, and regardless whether it has value, is checked or hidden.

Perhaps something like $('#form_id').find('input select textarea'); ?

Any idea how to achieve this?

Perhaps something like $('#form_id').find('input select textarea');? ... go ahead and try it. — Felix Kling
– Felix Kling, Commented Aug 28, 2011 at 10:24

zzapper · Accepted Answer · 2013-10-11 15:43:02Z

3

You can get all form elements with the :input pseudo class:

var elems = $('#form_id').find(':input'); // changed this line

edited Oct 11, 2013 at 15:43

zzapper

5,0895 gold badges54 silver badges46 bronze badges

answered Aug 28, 2011 at 10:29

Arnaud Le Blanc

100k24 gold badges211 silver badges196 bronze badges

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

5 Comments

user398341 Over a year ago

isn't this one going to only collect 'input' elements?

Arnaud Le Blanc Over a year ago

No, this is a pseudo class that matches all form elements (input, select, textarea, everything)

user398341 Over a year ago

How is it performance-wise comparing to the suggestion above ($('#form_id')[0].elements) ?

Dr.Molle Over a year ago

regardless of any benchmarks I guess elements should be mouch faster, it's a native property of forms, nothing to collect.

Felix Kling Over a year ago

Don't use :input anymore, it will be removed in the future.

Dr.Molle · Accepted Answer · 2011-08-28 11:20:03Z

1

Use:

$('#form_id')[0].elements

It will return a nodeList containing all form-elements.

jQuery(
  function($)
  {
    $.each($('#form_id')[0].elements,
           function(i,o)
           {
            var _this=$(o);
            alert('id:'+_this.attr('id')+'\ntitle:'+_this.attr('title'));
           })

  }
);

<edit>
Please Note: the elements-collecttion may also contain elements like fieldset or object, See: http://www.w3.org/TR/html5/forms.html#category-listed
</edit>

edited Aug 28, 2011 at 11:20

answered Aug 28, 2011 at 10:37

Dr.Molle

117k16 gold badges200 silver badges206 bronze badges

1 Comment

user398341 Over a year ago

that's fine - this is just for the initial validation (client side) - server side has more in depth filtration of all submitted variables

cicloon · Accepted Answer · 2011-08-28 10:50:29Z

0

I think this could work the way you want:

$('#form_id').children('input, select, textarea')

answered Aug 28, 2011 at 10:50

cicloon

1,0995 silver badges13 bronze badges

2 Comments

Arnaud Le Blanc Over a year ago

This will match only immediate children

Alp Over a year ago

Use find instead of children

Anas Naguib · Accepted Answer · 2018-05-23 22:14:54Z

0

You can Use this function

$.fn.serializeAssoc = function() {
    var formData = {};
    this.find('[name]').each(function() {
        formData[this.name] = this.value;  
    })
    return formData;
};

//And Use it like this

objArr = $('#FormID').serializeAssoc();

answered May 23, 2018 at 22:14

Anas Naguib

1,15011 silver badges12 bronze badges

1 Comment

Anas Naguib Over a year ago

this will return Associated array with key and value, where key is the form field name and the value is its value in the form.

Collectives™ on Stack Overflow

jquery form elements to array

4 Answers 4

5 Comments

1 Comment

2 Comments

1 Comment

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

4 Answers 4

5 Comments

1 Comment

2 Comments

1 Comment

Your Answer

Sign up or log in

Post as a guest

Related