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

108

是否有一种简单的方法（无需单独列出它们）在jquery中选择所有表单元素而仅选择表单元素。

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

例如：

$("form").each(function(){
    $(this, "input, textarea, select");
});
jquery  jquery-filter 
— 约翰木兰
source

Answers:

179

编辑：正如评论中指出的（Mario Awad和Brock Hensley），.find用来让孩子们

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

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

显示代码段

可能是：input选择器是您想要的

$（“ form”）。each（function（）{$（'：input'，this）// <-应该以该特定形式返回所有输入元素。

正如文档中指出的

为了在使用：input选择元素时达到最佳性能，请首先使用纯CSS选择器选择元素，然后使用.filter（“：input”）。

您可以像下面这样使用

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

— Selvakumar Arumugam
source
3
谢谢，尽管在阅读之后：api.jquery.com/input-selector性能是一个问题，我也可以列出它们。很高兴知道它的可能
— 约翰·木兰
8
是我还是这不起作用select？编辑：没关系，如果我使用，则与select一起使用find(':input')
— Brock Hensley 2013年
1
您必须在此处使用“查找”而不是“过滤器”，因为“过滤器”不能在单个元素（在本例中为“ this”元素）上运行。使用“过滤器”，您将不能选择任何表单元素，而不仅是“选择”元素。感谢@Brock Hensley指出这一点。
— Mario Awad 2014年
大表格怎么样？我有一个巨大的表单，其中包含4000多个元素，并且此选择器非常慢。在规范中写道：：input不是由CSS3优化的浏览器，所以对我：/不起作用。还有其他想法吗？
— Vasil Popov
@VasilPopov上面的内容对于您来说可能太慢了。您可以尝试两种解决方案，无论哪种方式都需要将较少的元素分组并选择它们。
— Selvakumar Arumugam 2015年
52

以下代码有助于从具有表单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());
    }
);
— 斯里尼瓦桑
source
为什么要采用选择元素的所有值和选项，而不是给出已选择或空白的内容的值。？
— user2906838 '16
11

如果还有其他类型，请编辑选择器：

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

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

— 马戏团
source
7

作为记录：以下代码段可以帮助您在悬停时通过临时标题获取有关输入，文本区域，选择，按钮，标签的详细信息。

在此处输入图片说明

$( '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 );
    } )
} );
— 伊戈尔·帕拉（Igor Parra）
source
功能强大！谢谢
— Mohamad Hamouday
6

jQuery保留了对原始JS表单元素的引用，并且其中包含对表单所有子元素的引用。您可以简单地获取参考并继续进行：

var someForm = $('#SomeForm');

$.each(someForm[0].elements, function(index, elem){
    //Do something here.
});
— 罗恩·西姆斯二世
source
5

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

它返回一个带有所有输入，选择和文本区域数据的对象。

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

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 = 'body';
    }

    $(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;
}
— 穆罕默德·哈穆迪（Mohamad Hamouday）
source
很好，但是“ Element_Value = jQuery（'input [name =“'+ Element_Name +'”]：checked'）。val（）;“中有一个细微的错误。Element_Name实际上可能是节点ID或类，在这种情况下，它将找不到元素。
— 拉斐尔·沃朗
1
是的，我现在已经解决了！
— Mohamad Hamouday
4 
var $form_elements = $("#form_id").find(":input");

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

— 一月
source
2
您如何访问它们？
— Ngenazy
3

只是添加另一种方式：

$('form[name=' + formName + ']').find(':input')
— 用户名
source
1

试试这个功能

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

请享用 ：）

— 艾哈迈德·贾马尔（Ahmed Jamal）
source
0

尝试这样的事情：

<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 []的使用

— 诗娜莎（Srinath Shah）
source
这似乎没有得到textareas或选择
— pcarvalho 18/11/22
0

所有输入：

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

所有按钮

var button = $("#formId :button")
— DLMAN
source
By using our site, you acknowledge that you have read and understand our Cookie Policy and Privacy Policy.
Licensed under cc by-sa 3.0 with attribution required.