jQuery的让所有的表单元素：输入，文本区域和选择(jquery get all form ele

2019-06-18 12:40发布

站内文章 / 后端开发
27 0 0

有一个简单的方法（不分别列出他们全部）jQuery中选择所有表单元素和仅表单元素。

因为表单包含其他HTML我不能使用儿童（）等。

例如： 

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

Answer 1:

编辑：正如在评论（中指出马里奥·阿瓦德 - 布洛克亨斯利 ），使用.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>

可能是：输入选择器是你想要的

$（ “表”）每个（函数（）{$（ '：输入'，这一点）// < -应该返回所有的输入元件在特定形式}）;

如在文档中指出

要使用时，达到最佳的性能：输入以选择的元素，第一选择使用纯CSS选择的元素，然后使用.filter（“：输入”）。

您可以使用如下， 

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



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:

如果您还有其他类型，编辑的选择： 

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

所有形式的元件现在是在阵列formElements。



Answer 4:

备案 ：下面的代码片段可以帮助你悬停他们的时候，以获取有关输入，文本区域，选择按钮，通过一个临时标题标签的详细信息 。 

$( '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的保持对香草JS表单元素的引用，这包含了所有形式的子元素的参考。 你可以简单地抓住参考，并着手推进： 

var someForm = $('#SomeForm');

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


Answer 6:

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

所有包括提交按钮的元素现在在变量$ form_elements。



Answer 7:

我想补充另一种方式： 

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


Answer 8:

这是我最喜欢的功能，它的工作原理就像一个魅力对我来说！

它返回所有输入，选择和textarea的数据的对象。

而且它试图通过获得找找元素命名对象的其他名字还有标识类。 

var All_Data = Get_All_Forms_Data();
console.log(All_Data);

// ------------------------------------------- 

function Get_All_Forms_Data(Element)
{
    Element = Element || '';
    var All_Page_Data = {};
    var All_Forms_Data_Temp = {};
    if(Element != '')
    {
        $(Element).find('input,select,textarea').each(function(i){ 
            All_Forms_Data_Temp[i] = $(this);
        });
    }
    else
    {
        $('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')  == 'radio') || (input.attr('type')  == 'checkbox'))
            {
                Element_Value = jQuery('input[name="'+Element_Name+'"]:checked').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;
}


Answer 9:

尝试是这样的： 

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

注意，使用输入的[]



Answer 10:

所有输入： 

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

所有按钮

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


Answer 11:

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


文章来源: jquery get all form elements: input, textarea & select
标签： jquery jquery-filter
举报

收藏的人(0)

Ta的文章 更多文章
登录 后发表评论
0条评论
还没有人评论过~