如何使用 jQuery 获取所有表单元素(输入、文本区域和选择) ？

编辑: 正如评论中指出的(马里奥 · 阿瓦德 & Brock Hensley) ，使用 .find来获取孩子

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

表单还有一个元素集合，有时这与子元素不同，例如表单标记位于表中且未关闭时。

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>

可能是 < strong > : input 选择器是你想要的

$(“ form”) . each (function (){ $(’: input’，this)//< ——应该返回该特定形式的所有输入元素。 });

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

If you have additional types, edit the selector:

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

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

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

包括提交按钮在内的所有元素现在都位于变量 $form _ element 中。

下面的代码有助于从具有表单 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());
}
);

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

注意: 我们在对象列表中添加了我们需要的更多元素标记名，如下所示,

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

JQuery 保留对普通 JS 表单元素的引用，这包含对表单所有子元素的引用。你只需抓住参考文献，然后向前推进:

var someForm = $('#SomeForm');


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

再补充一点:

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

对于记录 : 下面的代码片段可以帮助您在将 获取有关输入、文本区、选择、按钮、标记悬停时通过临时标题进行标记。

$( '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 );
} )
} );

这是我最喜欢的功能，它的工作像一个符咒为我！

它返回一个包含所有输入、选择和 textarea 数据的对象。

它尝试通过查找元素名称 else Id else 类来获取对象名称。

var form_data = get_form_data();
console.log(form_data);

功能:

function get_form_data(element){
element = element || '';
var all_page_data = {};
var all_forms_data_temp = {};
if(!element){
element = 'body';
}


if($(element)[0] == undefined){
return null;
}


$(element).find('input,select,textarea').each(function(i){
all_forms_data_temp[i] = $(this);
});


$.each(all_forms_data_temp,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').trim();
} else if((input.attr('id') !== undefined) && (input.attr('id') != '')){
element_name = input.attr('id').trim();
} else if((input.attr('class') !== undefined) && (input.attr('class') != '')){
element_name = input.attr('class').trim();
}


if(input.val() !== undefined){
if(input.attr('type') == 'checkbox'){
element_value = input.parent().find('input[name="'+element_name+'"]:checked').val();
} else if((input.attr('type') == 'radio')){
element_value = $('input[name="'+element_name+'"]:checked',element).val();
} else {
element_value = input.val();
}
} else if(input.text() != undefined){
element_value = input.text();
}


if(element_value === undefined){
element_value = '';
}


if(element_name !== undefined){
var element_array = new Array();
if(element_name.indexOf(' ') !== -1){
element_array = element_name.split(/(\s+)/);
} else {
element_array.push(element_name);
}


$.each(element_array,function(index, name){
name = name.trim();
if(name != ''){
all_page_data[name] = element_value;
}
});
}
});
return all_page_data;
}

试试这样:

<form action="/" id="searchForm">
<input type="text" name="s" placeholder="Search...">
<input type="submit" value="Search">
</form>
<!-- the result of the search will be rendered inside this div -->
<div id="result"></div>


<script>
// Attach a submit handler to the form
$( "#searchForm" ).submit(function( event ) {


// Stop form from submitting normally
event.preventDefault();


// Get some values from elements on the page:
var $form = $( this ),
term = $form.find( "input[name='s']" ).val(),
url = $form.attr( "action" );


// Send the data using post
var posting = $.post( url, { s: term } );


// Put the results in a div
posting.done(function( data ) {
var content = $( data ).find( "#content" );
$( "#result" ).empty().append( content );
});
});
</script>

注意 input []的用法

所有输入:

var inputs = $("#formId :input");

所有的按钮

var button = $("#formId :button")

JQuery 连载函数 使得获取所有表单元素变得非常容易。

演示: http://jsfiddle.net/55xnJ/2/

$("form").serialize(); //get all form elements at once


//result would be like this:
single=Single&multiple=Multiple&multiple=Multiple3&check=check2&radio=radio1

为了复合这个想法: 您可以使用类似的东西来使所有表单元素都可访问。

Data = $('form').serialize().split('&');


for(i in Data){
Data[i] = Data[i].split('=');
Fields[ Data[i][0] ] = [ Data[i][1],
$('form *[name="' + Data[i][0] + '"]').eq(0) ];
}


console.log(Fields);


// The result would be a multi-dimensional array you could loop through
Fields[Field_Name] = [Field_Value, Field_Object]

注意: 这只对命名字段有效，因为 seralize ()会忽略所有其他字段。具有重复名称的所有字段将被忽略。如果多个字段使用相同的名称，则可以创建多维数组。

试试这个功能

function fieldsValidations(element) {
var isFilled = true;
var fields = $("#"+element)
.find("select, textarea, input").serializeArray();


$.each(fields, function(i, field) {
if (!field.value){
isFilled = false;
return false;
}
});
return isFilled;
}

把它当做

$("#submit").click(function () {


if(fieldsValidations('initiate')){
$("#submit").html("<i class=\"fas fa-circle-notch fa-spin\"></i>");
}
});

Enjoy :)

我使用这种方法从某个表单获取所有输入字段:

$("#myForm").find("input").each(function() {
// your stuff goes here
});

或者这里的情况:

$("#myForm").find("select, textarea, input").each(function() {
// your stuff goes here
});