CODEWITHSUNDEEP
jqueryloops
James
James

Reputation: 2860

How to loop through all elements of a form jQuery

I was just wondering what the best way of looping through all the child elements of a form would be? My form contains both input and select elements.

At the moment I have:

success: function(data) {
                $.each(data.details, function(datakey, datavalue) {
                    $('#new_user_form > input').each(function(key, value) {
                        if($(this).attr('id') == datakey) {
                            $(this).val(datavalue);
                        }
                    });
                });
            }

This only loops through the input elements of the form though and I want to include the select elements too:

I have tried:

$('#new_user_form > input, #new_user_form > select').each(function(key, value) {

but this doesn't work. Does anyone know why this would be happening? Thanks!

Upvotes: 52

Views: 121725

Answers (10)

Umesh Patil
Umesh Patil

Reputation: 4978

To iterate through all the fields, you have to also specify type of a field or it will ignore select and textarea and others,

$('#formID').find('input,textarea,select').each(function() {
      //Do your stuff here
    });

enjoy ;)

Upvotes: 0

Ohgodwhy
Ohgodwhy

Reputation: 50808

From the jQuery :input selector page:

Because :input is a jQuery extension and not part of the CSS specification, queries using :input cannot take advantage of the performance boost provided by the native DOM querySelectorAll() method. To achieve the best performance when using :input to select elements, first select the elements using a pure CSS selector, then use .filter(":input").

This is the best choice.

$('#new_user_form *').filter(':input').each(function(){
    //your code here
});

Upvotes: 88

Gregory Bologna
Gregory Bologna

Reputation: 284

Do one of the two jQuery serializers inside your form submit to get all inputs having a submitted value.

var criteria = $(this).find('input,select').filter(function () {
    return ((!!this.value) && (!!this.name));
}).serializeArray();

var formData = JSON.stringify(criteria);

serializeArray() will produce an array of names and values

0: {name: "OwnLast", value: "Bird"}
1: {name: "OwnFirst", value: "Bob"}
2: {name: "OutBldg[]", value: "PDG"}
3: {name: "OutBldg[]", value: "PDA"}

var criteria = $(this).find('input,select').filter(function () {
    return ((!!this.value) && (!!this.name));
}).serialize();

serialize() creates a text string in standard URL-encoded notation

"OwnLast=Bird&OwnFirst=Bob&OutBldg%5B%5D=PDG&OutBldg%5B%5D=PDA"

Upvotes: 0

Sai Krishna
Sai Krishna

Reputation: 8197

As taken from the #jquery Freenode IRC channel:

$.each($(form).serializeArray(), function(_, field) { /* use field.name, field.value */ });

Thanks to @Cork on the channel.

Upvotes: 13

Phil
Phil

Reputation: 41

I have found this simple jquery snippet, to be handy for choosing just the type of selectors I want to work with:

$("select, input").each(function(){
     // do some stuff with the element
});

Upvotes: 4

romuleald
romuleald

Reputation: 1444

I'm using:

$($('form').prop('elements')).each(function(){
    console.info(this)
});

It Seems ugly, but to me it is still the better way to get all the elements with jQuery.

Upvotes: 8

user669677
user669677

Reputation:

pure JavaScript is not that difficult:

for(var i=0; i < form.elements.length; i++){
    var e = form.elements[i];
    console.log(e.name+"="+e.value);
}

Note: because form.elements is a object for-in loop does not work as expected.

Answer found here (by Chris Pietschmann), documented here (W3S).

Upvotes: 28

Adarsh Raj
Adarsh Raj

Reputation: 301

$('#new_user_form').find('input').each(function(){
   //your code here
});

Upvotes: 21

Siva Charan
Siva Charan

Reputation: 18064

What happens, if you do this way:-

$('#new_user_form input, #new_user_form select').each(function(key, value) {

Refer LIVE DEMO

Upvotes: 4

scottlimmer
scottlimmer

Reputation: 2278

$('#new_user_form :input') should be your way forward. Note the omission of the > selector. A valid HTML form wouldn't allow for a input tag being a direct child of a form tag.

Upvotes: 1

Related Questions