[jquery] jquery 모든 양식 요소 가져 오기 : 입력, 텍스트 영역 및 선택

Program / 글쓴이

jquery에서 모든 양식 요소와 양식 요소 만 선택하는 쉬운 방법이 있습니까 (모두 별도로 나열하지 않고).

양식에 다른 HTML이 포함되어 있기 때문에 children () 등을 사용할 수 없습니다.

예 :

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

답변

편집 : 코멘트 ( Mario Awad & Brock Hensley ) 에서 지적했듯이 .find, 아이들을 얻기 위해 사용

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

양식에는 요소 컬렉션도 있습니다. 때로는 양식 태그가 테이블에 있고 닫히지 않은 경우와 같이 하위 항목과 다릅니다.

코드 스 니펫 표시

될 수 있습니다 : 입력 선택기는 원하는 것입니다

$ ( “form”). each (function () {$ ( ‘: input’, this) // <-특정 형식의 모든 입력 요소를 반환해야합니다.});

문서에서 지적한대로

: input을 사용하여 요소를 선택할 때 최상의 성능을 얻으려면 먼저 순수한 CSS 선택기를 사용하여 요소를 선택한 다음 .filter ( “: input”)을 사용하십시오.

아래와 같이 사용할 수 있습니다.

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

답변

아래 코드는 양식 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());
    }
);

답변

추가 유형이있는 경우 선택기를 편집하십시오.

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

모든 양식 요소는 이제 배열 formElements에 있습니다.

답변

레코드의 경우 : 다음 스 니펫은 마우스를 가져 가면 임시 제목을 통해 입력, 텍스트 영역, 선택, 버튼, 태그 에 대한 세부 정보를 얻을 수 있도록 도와 줍니다.

여기에 이미지 설명 입력

$( '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는 바닐라 JS 양식 요소에 대한 참조를 유지하며 여기에는 양식의 모든 하위 요소에 대한 참조가 포함됩니다. 참조를 잡고 앞으로 진행할 수 있습니다.

var someForm = $('#SomeForm');

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

답변

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

답변

이것은 제가 가장 좋아하는 기능이며 저에게 매력처럼 작동합니다!

입력, 선택 및 텍스트 영역 데이터에 대해 모두가있는 개체를 반환합니다.

그리고 요소 이름 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;
}