Jquery get all form elements: input, textarea & select

Question

Is there a simple way (without listing them separately) in jquery to select all form elements and only form elements.

I cannot use children (), etc., because the form contains different HTML.

eg:

$("form").each(function(){ $(this, "input, textarea, select"); }); 

Answer 1

Edit: As stated in the comments ( Mario Awad and Brock Hensley ), use .find to get the kids

 $("form").each(function(){ $(this).find(':input') //<-- Should return all input elements in that specific form. }); 

They also have a collection of elements, sometimes it differs from children, for example, when the form tag is in the table and is not closed.

 var summary = []; $('form').each(function () { summary.push('Form ' + this.id + ' has ' + $(this).find(':input').length + ' child(ren).'); summary.push('Form ' + this.id + ' has ' + this.elements.length + ' form element(s).'); }); $('#results').html(summary.join('<br />')); 

 <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script> <form id="A" style="display: none;"> <input type="text" /> <button>Submit</button> </form> <form id="B" style="display: none;"> <select><option>A</option></select> <button>Submit</button> </form> <table bgcolor="white" cellpadding="12" border="1" style="display: none;"> <tr><td colspan="2"><center><h1><i><b>Login Area</b></i></h1></center></td></tr> <tr><td><h1><i><b>UserID:</b></i></h1></td><td><form id="login" name="login" method="post"><input name="id" type="text"></td></tr> <tr><td><h1><i><b>Password:</b></i></h1></td><td><input name="pass" type="password"></td></tr> <tr><td><center><input type="button" value="Login" onClick="pasuser(this.form)"></center></td><td><center><br /><input type="Reset"></form></td></tr></table></center> <div id="results"></div> 

---

Maybe : input selector is what you want

<h> $ ("form"). Each (function () {$ (': input', this) // <- should return all input elements in this particular form.});

As indicated in the docs

To achieve maximum performance when using: input to select elements, first select the elements using a clean CSS selector, then use .filter (": input").

You can use as below

 $("form").each(function(){ $(this).filter(':input') //<-- Should return all input elements in that specific form. }); 

Answer 2

The following code helps you get the details of elements from a specific form with a form identifier,

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

The following code helps get the details of the elements from all the forms that are on the download page,

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

The code below helps you get the details of the elements that are on the download page, even if the element is not 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 more element tag tags that we need in the list of objects, as shown below,

 Example: to get name of attribute "textarea", $('input, select, textarea').each( function(index){ var input = $(this); alert('Type: ' + input.attr('type') + 'Name: ' + input.attr('name') + 'Value: ' + input.val()); } ); 

Answer 3

If you have additional types, edit the selector:

 var formElements = new Array(); $("form :input").each(function(){ formElements.push($(this)); }); 

All form elements are now in the formElements array.

Answer 4

For the record . The following snippet can help you get information about input tags, text area, select, button, through the temp header when you hover over them.

 $( 'body' ).on( 'mouseover', 'input, textarea, select, button, a', function() { var $tag = $( this ); var $form = $tag.closest( 'form' ); var title = this.title; var id = this.id; var name = this.name; var value = this.value; var type = this.type; var cls = this.className; var tagName = this.tagName; var options = []; var hidden = []; var formDetails = ''; if ( $form.length ) { $form.find( ':input[type="hidden"]' ).each( function( index, el ) { hidden.push( "\t" + el.name + ' = ' + el.value ); } ); var formName = $form.prop( 'name' ); var formTitle = $form.prop( 'title' ); var formId = $form.prop( 'id' ); var formClass = $form.prop( 'class' ); formDetails += "\n\nFORM NAME: " + formName + "\nFORM TITLE: " + formTitle + "\nFORM ID: " + formId + "\nFORM CLASS: " + formClass + "\nFORM HIDDEN INPUT:\n" + hidden.join( "\n" ); } var tempTitle = "TAG: " + tagName + "\nTITLE: " + title + "\nID: " + id + "\nCLASS: " + cls; if ( 'SELECT' === tagName ) { $tag.find( 'option' ).each( function( index, el ) { options.push( el.value ); } ); tempTitle += "\nNAME: " + name + "\nVALUE: " + value + "\nTYPE: " + type + "\nSELECT OPTIONS:\n\t" + options; } else if ( 'A' === tagName ) { tempTitle += "\nHTML: " + $tag.html(); } else { tempTitle += "\nNAME: " + name + "\nVALUE: " + value + "\nTYPE: " + type; } tempTitle += formDetails; $tag.prop( 'title', tempTitle ); $tag.on( 'mouseout', function() { $tag.prop( 'title', title ); } ) } ); 

Answer 5

jQuery maintains a reference to the JS vanilla form element, and this contains a link to all child elements of the form. You can simply take the link and continue:

 var someForm = $('#SomeForm'); $.each(someForm[0].elements, function(index, elem){ //Do something here. }); 

Answer 6

 var $form_elements = $("#form_id").find(":input"); 

All elements, including the submit button, are now in the $ form_elements variable.

Answer 7

Just add another way:

 $('form[name=' + formName + ']').find(':input') 

Answer 8

This is my favorite feature and it works like a charm to me!

It returns an object with everything for input, selection and text data.

And he tries to get the name of the object by looking for the names of the elements else else else class.

 All_Data = Get_All_Page_Data(); console.log(All_Data); //------------------------------------------- function Get_All_Page_Data() { var All_Page_Data = {}; $('input, select, textarea').each(function(){ var input = $(this); var Element_Name; var Element_Value; if((input.attr('type') == 'submit') || (input.attr('type') == 'button')) { return true; } if((input.attr('name') != undefined) && (input.attr('name') != '')) { Element_Name = input.attr('name'); } else if((input.attr('id') != undefined) && (input.attr('id') != '')) { Element_Name = input.attr('id'); } else if((input.attr('class') != undefined) && (input.attr('class') != '')) { Element_Name = input.attr('class'); } if(input.val() != undefined) { if(input.attr('type') == 'radio') { Element_Value = jQuery('input[name='+Element_Name+']:checked').val(); } else { Element_Value = input.val(); } } else if(input.value() != undefined) { Element_Value = input.value(); } else if(input.text() != undefined) { Element_Value = input.text(); } if(Element_Name != undefined) { All_Page_Data[Element_Name] = Element_Value; } }); return All_Page_Data; }