jQuery로 모든 양식 요소(입력, 텍스트 영역 및 선택)를 가져오려면 어떻게 해야 합니까?

jQuery로 모든 양식 요소(입력, 텍스트 영역 및 선택)를 가져오려면 어떻게 해야 합니까?

jquery에서 모든 양식 요소를 선택하고 양식 요소만 선택할 수 있는 쉬운 방법이 있습니까?

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

예:

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

편집: 댓글(Mario Awad & 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>

---

가능성:입력 선택기가 당신이 원하는 것입니다.

$("form"). 각(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));
});

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

JQuery serialize 기능을 사용하면 모든 폼 요소를 쉽게 얻을 수 있습니다.

데모: 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]

참고: serialize()는 다른 모든 필드를 무시하기 때문에 명명된 필드에서만 작동합니다.이름이 중복된 모든 필드는 무시됩니다.여러 필드가 동일한 이름을 사용하는 경우 다차원 배열을 만들 수 있습니다.

jQuery는 vanilla JS 양식 요소에 대한 참조를 유지하며, 여기에는 양식의 모든 하위 요소에 대한 참조가 포함됩니다.참조 자료를 가져와서 진행하기만 하면 됩니다.

var someForm = $('#SomeForm');

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

참고로:다음 코드 조각은 태그를 마우스로 가리킬 때 임시 제목을 통해 입력, 텍스트 영역, 선택, 버튼 및 태그에 대한 세부 정보를 얻는 데 도움이 됩니다.

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

이것은 내가 가장 좋아하는 기능이고 나에게 매력적으로 작동합니다!

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

그리고 객체 이름을 찾기 위해 요소 이름을 찾고 있습니다. 그렇지 않으면 Idelse 클래스입니다.

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

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

제출 버튼을 포함한 모든 요소는 이제 $form_elements 변수에 있습니다.

다른 방법을 추가하자면:

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

이 기능을 사용해 보십시오.

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

즐기세요 :)

이 방법을 사용하여 특정 양식에서 모든 입력 필드를 가져옵니다.

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

또는 여기에 해당하는 경우:

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

몇 년 후에…

const formElements = Object.entries($('form').get(0).elements)
    .reduce((arr, [_, el]) => 
        el.name 
            ? Object.assign(arr, { [el.name]: el.value }) 
            : arr, 
        {}
    );

결과는 이름이 비어 있지 않은 모든 폼 요소의 단순 키:값 목록입니다.

JS의, 바라닐 JS경대체우의로 합니다.$('form').get(0)단순한 document.querySelector('form').

다음과 같은 방법을 사용해 보십시오.

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

입력[]의 사용을 기록합니다.

모든 입력:

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

모든 단추

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

jquery는 필요하지 않습니다.

html 제어 요소는 다음 중 하나여야 합니다.button,fieldset,input,object,output,select,textarea

그래서 당신은 자바스크립트의 네이티브를 사용할 수 있습니다.

// use query selector instead
const nodes = document.querySelectorAll(
  ":where(button,fieldset,input,object,output,select,textarea)"
);
console.log({ nodes });

<div>
  <input type="text" id="name" name="name" value="bob">
</div>
<div>
  <textarea name="textarea" rows="10" cols="50">Write something here</textarea>
</div>

의 위치에서 할 수 ▁of▁outside▁anywhere▁the▁control▁elements)▁select▁form(▁(다것▁wouldeven▁on▁above도▁page입니위▁the의서외에).<form>태그). 양식이 이미 있고 해당 요소만 원하는 경우 양식에 요소 속성을 사용할 수 있습니다.

const formControls = myForm.elements

언급URL : https://stackoverflow.com/questions/12862601/how-an-i-get-all-form-elements-input-textarea-select-with-jquery