Jquery get input array 필드

Jquery get input array 필드

여기서 비슷한 질문을 찾았지만 저는 아무것도 안 됩니다.

다음과 같은 입력이 있습니다.

<input type="text" value="2" name="pages_title[1]">
<input type="text" value="1" name="pages_title[2]">

다음과 같은 필드를 얻기 위해 노력합니다.

$('input[name="pages_title[]"]')

결과가 비어 있습니다 :(

어떻게 모든 필드를 얻을 수 있습니까?나는 그것을 단지 얻을 수 있습니다.$('input[name="pages_title[1]"]')

셀렉터와 함께 시작 사용

$('input[name^="pages_title"]').each(function() {
    alert($(this).val());
});

js fiddle 예제

참고: @epascarello와 합의하여 요소에 클래스를 추가하고 해당 클래스를 참조하는 것이 더 나은 해결책입니다.

const textValues = $.map($('input[type=text][name="pages_title[]"]'), function(el) { return el.value; });
   console.log(textValues);

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<input type="text" value="Hello" name="pages_title[]">
<input type="text" value="World" name="pages_title[]">

우리는 배열로 저장된 입력 값을 얻을 수 있습니다.

var values = $("input[name='pages_title[]']").map(function(){return $(this).val();}).get();

선택기와 함께 시작을 사용해야 합니다.

var elems = $( "[name^='pages_title']" );

그러나 더 나은 해결책은 요소에 클래스를 추가하고 클래스를 참조하는 것입니다.그것이 더 빠른 조회인 이유.

대괄호를 사용하도록 입력 이름을 작은 따옴표 사이에 넣습니다.[]끈 취급을 당합니다

var multi_members="";
$("input[name='bayi[]']:checked:enabled").each(function() {
    multi_members=$(this).val()+","+multi_members;
});

입력 텍스트 상자 클래스 이름은 다음과 같이 지정할 수 있습니다.

<input type="text" value="2" name="pages_title[1]" class="pages_title">
<input type="text" value="1" name="pages_title[2]" class="pages_title">

다음과 같이 반복합니다.

$('input.pages_title').each(function() {
    alert($(this).val()); 
});

가장 좋은 방법은 Propper Form을 사용하고 jQuery.serialize를 사용하는 것이라고 생각합니다.배열.

<!-- a form with any type of input -->
<form class="a-form">
    <select name="field[something]">...</select>
    <input type="checkbox" name="field[somethingelse]" ... />
    <input type="radio" name="field[somethingelse2]" ... />
    <input type="text" name="field[somethingelse3]" ... />
</form>

<!-- sample ajax call -->
<script>
$(document).ready(function(){
    $.ajax({
        url: 'submit.php',
        type: 'post',
        data: $('form.a-form').serializeArray(),
        success: function(response){
            ...
        }
    });
});
</script>

다음과 같이 PHP로 Values를 이용할 수 있습니다.$_POST['field'][INDEX].

용기 선택기를 사용할 수 있습니다.

[name*="value"]: 지정된 속성을 가진 요소와 주어진 부분 문자열을 포함하는 값을 선택합니다.

$( document ).on( "keyup", "input[name*='pages_title']", function() {
     alert($(this).val());
});

가장 많이 사용되는 것은 다음과 같습니다.

$("input[name='varname[]']").map( function(key){
    console.log(key+':'+$(this).val());
})

배열 위치와 값의 키를 얻을 수 있습니다.

다음과 같이 이중 백슬래시를 사용하여 대괄호를 벗어날 수 있습니다.

$('input[name="pages_title\\[\\]"]')

특정 특성을 가진 속성별 요소를 선택하기 위해 regex 패턴을 사용하여 다음 토막글과 같은 새 선택기를 만들 수 있습니다.regex를 사용하는 것은 새 선택기를 최대한 유연하게 만들기 위한 것입니다.

jQuery.extend(jQuery.expr[':'], {
    nameMatch: function (ele, idx, selector) {
        var rpStr = (selector[3] || '').replace(/^\/(.*)\/$/, '$1');
        return (new RegExp(rpStr)).test(ele.name);
    }
});


//
// use of selector
//
$('input:nameMatch(/^pages_title\\[\\d\\]$/)').each(function(idx, ele) {
  console.log(ele.outerHTML);
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>


<input type="text" value="2" name="pages_title[1]">
<input type="text" value="1" name="pages_title[2]">
<input type="text" value="1" name="pages_title[]">

또 다른 솔루션은 다음을 기반으로 할 수 있습니다.

• [name^="value"]: 지정된 속성이 지정된 문자열로 정확히 시작하는 값을 가지는 요소를 선택합니다.

• .filter (): 일치하는 요소 집합을 셀렉터와 일치하거나 함수의 테스트를 통과한 것으로 줄입니다.

• 레젝스 무늬

var selectedEle = $(':input[name^="pages_title"]').filter(function(idx, ele) {
    //
    // test if the name attribute matches the pattern.....
    //
    return  /^pages_title\[\d\]$/.test(ele.name);
});
selectedEle.each(function(idx, ele) {
    console.log(ele.outerHTML);
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>


<input type="text" value="2" name="pages_title[1]">
<input type="text" value="1" name="pages_title[2]">
<input type="text" value="1" name="pages_title[]">

var data = $("input[name='page_title[]']")
  .map(function () {
    return $(this).val();
  })
  .get();

언급URL : https://stackoverflow.com/questions/19529443/jquery-get-input-array-field