jquery获取所有表单元素：input，textarea和select

有一个简单的方法（没有单独列出所有）在jQuery中select所有的表单元素，只有forms的元素。

我不能使用children（）等，因为表单包含其他的HTML。

例如：

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

Answer 1

编辑：正如评论（ Mario Awad ＆ Brock Hensley ）所指出的那样，使用.find来获得孩子

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

表单也有一个元素集合，有时这与孩子有所不同，比如当表单标签在表格中而没有closures时。

 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> 

Answer 2

下面的代码有助于从表单id中获取具体表单元素的细节，

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

下面的代码有助于从加载页面中的所有表单中获取元素的详细信息，

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

下面的代码有助于获取放置在加载页面中的元素的细节，即使元素不在标签内，

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

注意：我们在对象列表中添加更多元素标签名称，如下所示，

 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

如果您有其他types，请编辑select器：

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

所有表单元素现在都在数组formElements中。

Answer 4

logging ：下面的代码片段可以帮助你获得关于input，textarea，select，button，标签通过一个临时标题hover他们的细节 。

 $( '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

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

所有包含提交button的元素现在都在variables$ form_elements中。

Answer 6

jQuery保持对vanilla JS表单元素的引用，并且包含对所有表单的子元素的引用。 您可以简单地抓住参考并继续前进：

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

Answer 7

只是添加另一种方式：

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

Answer 8

这是我最喜欢的function，它对我来说就像一个魅力！

它返回一个对象，包含所有的input，select和textarea数据。

它试图通过查找元素名称来获取对象名称。

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