jquery how to get form element types, names and values

Question

I know I can get the name/value relationship by using

$(#form).serializeArray();

But is there a way to get the whole enchilada, type, name

Answer 1

Use $("form :input")

Per the docs:

Description: Selects all input, textarea, select and button elements.

Now to your question,

there a way to get the whole enchilada, type, name and value with one call?

If you simply want to loop through the items,

$("form :input").each(function(index, elm){
  //Do something amazing...
});

But if you want to return some sort of structure, you can use .map()

var items = $("form :input").map(function(index, elm) {
    return {name: elm.name, type:elm.type, value: $(elm).val()};
});

Or if you simply want to get the elements

$("form :input").get()

Example of this on jsfiddle

Answer 2

Perhaps children() will be more useful but you'll still have to filter elements of interest yourself, unless you use a selector.

You might also do the following if you only want to select successful elements in the form; this will NOT include buttons or disabled fields.

$($('#testf').serializeArray()).each(function(index, value){
    $('#testf [name="' + value.name + '"]'); //select the named element
});

Mark's answer seems like the best way, IMO.

Answer 3

To get ALL form elements use

$('input, textarea, select').each(function() {
    //   $(this).attr('type');
    //   $(this).attr('name');
    //   $(this).val();
});

Answer 4

Can you loop through each input element of the form and use the data you get from there? Something like this:

$('form input').each(function(i, v) {
    // Access like this:
    //   $(this).attr('type');
    //   $(this).attr('value');
    //   $(this).attr('name');
});

Answer 5

The below code helps to get the details of elements from the specific form with the form id,

$('#formId input, #formId select').each(
    function(index){  
        var input = $(this);
        alert('Type: ' + input.attr('type') + 'Name: ' + input.attr('name') + 'Value: ' + input.val());
    }
):

The below code helps to get the details of elements from all the forms which are place in the loading page,

$('form input, form select').each(
    function(index){  
        var input = $(this);
        alert('Type: ' + input.attr('type') + 'Name: ' + input.attr('name') + 'Value: ' + input.val());
    }
):

The below code helps to get the details of elements which are place in the loading page even when the element is not place inside the tag,

$('input, select').each(
    function(index){  
        var input = $(this);
        alert('Type: ' + input.attr('type') + 'Name: ' + input.attr('name') + 'Value: ' + input.val());
    }
):

NOTE: We add the more element tag name what we need in the object list like as below,

Example: to get name of attribute "fieldset",

$('input, select, fieldset').each(
    function(index){  
        var input = $(this);
        alert('Type: ' + input.attr('type') + 'Name: ' + input.attr('name') + 'Value: ' + input.val());
    }
):