jquery lấy tất cả các phần tử biểu mẫu: input, textarea & select

Có cách nào dễ dàng (mà không liệt kê tất cả chúng một cách riêng biệt) trong jquery để chọn tất cả các phần tử biểu mẫu và chỉ các thành phần biểu mẫu.

Tôi không thể sử dụng con (), v.v. vì biểu mẫu chứa HTML khác.

Ví dụ:

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

Chỉnh sửa: Như đã chỉ ra trong nhận xét ( Mario Awad & Brock Hensley ), sử dụng .findđể có được trẻ em

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

các biểu mẫu cũng có một bộ sưu tập các phần tử, đôi khi điều này khác với các phần tử con, chẳng hạn như khi thẻ biểu mẫu nằm trong một bảng và không được đóng.

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>

Có thể là : bộ chọn đầu vào là những gì bạn muốn

$ ("form"). each (function () {$ (': input', this) // <- Nên trả về tất cả các phần tử đầu vào ở dạng cụ thể đó.});

Như đã chỉ ra trong tài liệu

Để đạt được hiệu suất tốt nhất khi sử dụng: input để chọn phần tử, trước tiên hãy chọn phần tử bằng bộ chọn CSS thuần túy, sau đó sử dụng .filter (": input").

Bạn có thể sử dụng như bên dưới,

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

Đoạn mã dưới đây giúp lấy chi tiết các phần tử từ biểu mẫu cụ thể với id biểu mẫu,

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

Đoạn mã dưới đây giúp lấy chi tiết các phần tử từ tất cả các biểu mẫu được đặt trong trang tải,

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

Đoạn mã dưới đây giúp lấy thông tin chi tiết về các phần tử được đặt trong trang tải ngay cả khi phần tử không được đặt bên trong thẻ,

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

LƯU Ý: Chúng tôi thêm tên thẻ phần tử khác mà chúng tôi cần trong danh sách đối tượng như bên dưới,

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

Nếu bạn có các loại bổ sung, hãy chỉnh sửa bộ chọn:

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

Tất cả các phần tử biểu mẫu bây giờ đều ở trong mảng formElements.

Đối với bản ghi : Đoạn mã sau đây có thể giúp bạn biết chi tiết về đầu vào, vùng văn bản, lựa chọn, nút, thẻ thông qua tiêu đề tạm thời khi di chuột qua chúng.

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

jQuery giữ một tham chiếu đến phần tử biểu mẫu vani JS và điều này chứa một tham chiếu đến tất cả các phần tử con của biểu mẫu. Bạn có thể chỉ cần lấy tham chiếu và tiếp tục:

var someForm = $('#SomeForm');

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

Hàm tuần tự hóa của JQuery giúp dễ dàng lấy tất cả các phần tử biểu mẫu.

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

Đây là chức năng yêu thích của tôi và nó hoạt động như một sự quyến rũ đối với tôi!

Nó trả về một đối tượng với tất cả cho dữ liệu input, select và textarea.

Và nó đang cố gắng lấy tên đối tượng bằng cách tìm tên phần tử khác Id else class.

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

Chức năng:

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

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

Tất cả các phần tử bao gồm nút gửi bây giờ nằm ​​trong biến $ form_elements.

Chỉ để thêm một cách khác:

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

Hãy thử chức năng này

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

Và sử dụng nó như

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

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

Thưởng thức :)

Hãy thử một cái gì đó như sau:

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

Lưu ý việc sử dụng đầu vào []

tất cả các đầu vào:

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

tất cả các nút

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