jQuery를 사용하여 양식 입력 필드를 얻습니까?

입력 필드가 많은 양식이 있습니다.

jQuery로 양식 제출 이벤트를 잡을 때 해당 양식의 모든 입력 필드를 연관 배열로 가져올 수 있습니까?

$('#myForm').submit(function() {
    // get all the inputs into an array.
    var $inputs = $('#myForm :input');

    // not sure if you wanted this, but I thought I'd add it.
    // get an associative array of just the values.
    var values = {};
    $inputs.each(function() {
        values[this.name] = $(this).val();
    });

});

Simon_Weaver의 팁 덕분에 다음을 사용하여 다른 방법을 사용할 수 있습니다 serializeArray.

var values = {};
$.each($('#myForm').serializeArray(), function(i, field) {
    values[field.name] = field.value;
});

이 스 니펫은 <select multiple>요소에서 실패 합니다.

나타납니다 새로운 HTML 5 폼 입력이 작동하지 않습니다 serializeArrayjQuery를 버전 1.3에서. 버전 1.4 이상에서 작동합니다

이 질문에 대해 파티에 늦었지만 더 쉽습니다.

$('#myForm').submit(function() {
    // Get all the forms elements and their values in one step
    var values = $(this).serialize();

});

jquery.form 플러그인은 다른 사람이 질문에이를까지 무엇을 찾고에 도움이 될 수 있습니다. 그것이 당신이 원하는 것을 직접하는지 아닌지 확실하지 않습니다.

도있다 serializeArray의 기능.

때로는 한 번에 하나씩 얻는 것이 더 유용하다는 것을 알았습니다. 이를 위해 다음이 있습니다.

var input_name = "firstname";
var input = $("#form_id :input[name='"+input_name+"']"); 

$('#myForm').bind('submit', function () {
  var elements = this.elements;
});

요소 변수는 양식 내의 모든 입력, 선택, 텍스트 영역 및 필드 세트를 포함합니다.

다음은 폼에 대한 모든 데이터를 가져 와서 서버 측 호출 또는 기타 용도로 사용할 수있는 다른 솔루션입니다.

$('.form').on('submit', function( e )){ 
   var form = $( this ), // this will resolve to the form submitted
       action = form.attr( 'action' ),
         type = form.attr( 'method' ),
         data = {};

     // Make sure you use the 'name' field on the inputs you want to grab. 
   form.find( '[name]' ).each( function( i , v ){
      var input = $( this ), // resolves to current input element.
          name = input.attr( 'name' ),
          value = input.val();
      data[name] = value;
   });

  // Code which makes use of 'data'.

 e.preventDefault();
}

그런 다음 ajax 호출과 함께 사용할 수 있습니다.

function sendRequest(action, type, data) {
       $.ajax({
            url: action,
           type: type,
           data: data
       })
       .done(function( returnedHtml ) {
           $( "#responseDiv" ).append( returnedHtml );
       })
       .fail(function() {
           $( "#responseDiv" ).append( "This failed" );
       });
}

이것이 당신에게 어떤 용도로 사용되기를 바랍니다 :)

약간의 비틀기와 비슷한 문제가 있었고 이것을 버릴 것이라고 생각했습니다. 양식을 가져 오는 콜백 함수가 있으므로 양식 객체가 이미 있고 쉽게 변형 할 수 없었습니다 $('form:input'). 대신에 나는 생각해 냈습니다.

    var dataValues = {};
    form.find('input').each(
        function(unusedIndex, child) {
            dataValues[child.name] = child.value;
        });

비슷하지만 동일한 상황은 아니지만이 스레드가 매우 유용하다는 것을 알았고 마지막에 이것을 쓰면 다른 사람이 유용하다고 생각했습니다.

연관성? 몇 가지 작업이 없지만 일반 선택기를 사용할 수 있습니다.

var items = new Array();

$('#form_id:input').each(function (el) {
    items[el.name] = el;
});

jQuery serializeArray에는 비활성화 된 필드가 포함되어 있지 않으므로 필요한 경우 다음을 시도하십시오.

var data = {};
$('form.my-form').find('input, textarea, select').each(function(i, field) {
    data[field.name] = field.value;
});

http://api.jquery.com/serializearray/

$('#form').on('submit', function() {
    var data = $(this).serializeArray();
});

XMLHttpRequest Level 2 FormData 객체를 사용하여 jQuery 없이도 수행 할 수 있습니다.

http://www.w3.org/TR/2010/WD-XMLHttpRequest2-20100907/#the-formdata-interface

var data = new FormData([form])

체크 박스와 라디오 버튼을 잊지 마세요-

var inputs = $("#myForm :input");
var obj = $.map(inputs, function(n, i) {
  var o = {};
  if (n.type == "radio" || n.type == "checkbox")
    o[n.id] = $(n).attr("checked");
  else
    o[n.id] = $(n).val();
  return o;
});
return obj

이 코드는 이름 대신 작동 합니다. 이메일 양식 필드 이름을 입력하십시오.

$(document).ready(function(){
  $("#form_id").submit(function(event){
    event.preventDefault();
    var name = $("input[name='name']",this).val();
    var email = $("input[name='email']",this).val();
  });
});

아무도 목록 데이터를 얻는 것에 대한 간결한 해결책을 제안하거나 제안하지 않은 것이 이상합니다. 어떤 형태도 단일 치수 객체가 될 수 없습니다.

물론이 솔루션의 단점은 싱글 톤 객체가 [0] 인덱스에서 액세스되어야한다는 것입니다. 그러나 IMO는 수십 라인 매핑 솔루션 중 하나를 사용하는 것보다 낫습니다.

var formData = $('#formId').serializeArray().reduce(function (obj, item) {
    if (obj[item.name] == null) {
        obj[item.name] = [];
    } 
    obj[item.name].push(item.value);
    return obj;
}, {});

나는 같은 문제가 있었고 다른 방법으로 해결했습니다.

var arr = new Array();
$(':input').each(function() {
 arr.push($(this).val());
});
arr;

모든 입력 필드의 값을 반환합니다. 를 $(':input')보다 구체적으로 변경할 수 있습니다 .

nickf 와 같은 솔루션 이지만 배열 입력 이름을 고려한 예 :

<input type="text" name="array[]" />

values = {};
$("#something :input").each(function() {
  if (this.name.search(/\[\]/) > 0) //search for [] in name
  {
    if (typeof values[this.name] != "undefined") {
      values[this.name] = values[this.name].concat([$(this).val()])
    } else {
      values[this.name] = [$(this).val()];
    }
  } else {
    values[this.name] = $(this).val();
  }
});

입력에서 여러 값을 가져와야하고 []를 사용하여 여러 값으로 입력을 정의하는 경우 다음을 사용할 수 있습니다.

$('#contentform').find('input, textarea, select').each(function(x, field) {
    if (field.name) {
        if (field.name.indexOf('[]')>0) {
            if (!$.isArray(data[field.name])) {
               data[field.name]=new Array();
            }
            data[field.name].push(field.value);
        } else {
            data[field.name]=field.value;
        }
    }                   
});

Lance Rushing 과 Simon_Weaver의 답변에서 영감을 얻은 이 솔루션은 제가 가장 좋아하는 솔루션입니다.

$('#myForm').submit( function( event ) {
    var values = $(this).serializeArray();
    // In my case, I need to fetch these data before custom actions
    event.preventDefault();
});

출력은 객체의 배열입니다. 예 :

[{name: "start-time", value: "11:01"}, {name: "end-time", value: "11:11"}]

아래 코드로

var inputs = {};
$.each(values, function(k, v){
    inputs[v.name]= v.value;
});

최종 출력은

{"start-time":"11:01", "end-time":"11:01"}

각 루프 없이이 코드를 사용하고 있습니다.

$('.subscribe-form').submit(function(e){
    var arr=$(this).serializeArray();
    var values={};
    for(i in arr){values[arr[i]['name']]=arr[i]['value']}
    console.log(values);
    return false;
});

나는 이것이 가장 쉽고 도움이되기를 바랍니다.

 $("#form").submit(function (e) { 
    e.preventDefault();
    input_values =  $(this).serializeArray();
  });

모든 양식 필드를 사용하여 ajax 호출을 수행해야 할 때 : 입력 선택기가 선택 여부에 관계없이 모든 확인란을 반환 하는 데 문제가 있었습니다. 제출 가능한 양식 요소를 얻기 위해 새 선택기를 추가했습니다.

$.extend($.expr[':'],{
    submitable: function(a){
        if($(a).is(':checkbox:not(:checked)'))
        {
            return false;
        }
        else if($(a).is(':input'))
        {
            return true;
        }
        else
        {
            return false;
        }
    }
});

용법:

$('#form_id :submitable');

아직 여러 선택 상자로 테스트하지는 않았지만 표준 제출과 같은 방식으로 모든 양식 필드를 가져 오는 데 효과적입니다.

OpenCart 사이트의 제품 옵션을 사용자 정의 할 때 표준 선택 상자 유형뿐만 아니라 확인란과 텍스트 필드를 포함하기 위해 이것을 사용했습니다.

serialize ()가 가장 좋은 방법입니다. 크리스토퍼 파커 (Christopher Parker)는 Nickf의 답변이 더 많은 것을 성취한다고 말하지만 양식에 텍스트 영역과 선택 메뉴가 포함될 수 있다는 점을 고려하지는 않습니다. serialize ()를 사용하고 필요에 따라 조작하는 것이 훨씬 좋습니다. serialize ()의 데이터는 Ajax 포스트 또는 get에서 사용할 수 있으므로 아무런 문제가 없습니다.

이것이 누군가를 돕기를 바랍니다. :)

// This html:
// <form id="someCoolForm">
// <input type="text" class="form-control" name="username" value="...." />
// 
// <input type="text" class="form-control" name="profile.first_name" value="...." />
// <input type="text" class="form-control" name="profile.last_name" value="...." />
// 
// <input type="text" class="form-control" name="emails[]" value="..." />
// <input type="text" class="form-control" name="emails[]" value=".." />
// <input type="text" class="form-control" name="emails[]" value="." />
// </form>
// 
// With this js:
// 
// var form1 = parseForm($('#someCoolForm'));
// console.log(form1);
// 
// Will output something like:
// {
// username: "test2"
// emails:
//   0: ".@....com"
//   1: "...@........com"
// profile: Object
//   first_name: "..."
//   last_name: "..."
// }
// 
// So, function below:

var parseForm = function (form) {

    var formdata = form.serializeArray();

    var data = {};

    _.each(formdata, function (element) {

        var value = _.values(element);

        // Parsing field arrays.
        if (value[0].indexOf('[]') > 0) {
            var key = value[0].replace('[]', '');

            if (!data[key])
                data[key] = [];

            data[value[0].replace('[]', '')].push(value[1]);
        } else

        // Parsing nested objects.
        if (value[0].indexOf('.') > 0) {

            var parent = value[0].substring(0, value[0].indexOf("."));
            var child = value[0].substring(value[0].lastIndexOf(".") + 1);

            if (!data[parent])
                data[parent] = {};

            data[parent][child] = value[1];
        } else {
            data[value[0]] = value[1];
        }
    });

    return data;
};

모든 답변은 훌륭하지만 해당 기능에서 무시하고 싶은 필드가 있다면? 필드에 속성을 지정하십시오 (예 : ignore_this).

<input type="text" name="some_name" ignore_this>

그리고 Serialize 기능에서 :

if(!$(name).prop('ignorar')){
   do_your_thing;
}

이것이 일부 필드를 무시하는 방식입니다.

다음 코드를 시도하십시오.

jQuery("#form").serializeArray().filter(obje => 
obje.value!='').map(aobj=>aobj.name+"="+aobj.value).join("&")

여러 선택 요소 ( <select multiple="multiple">)의 경우 @Jason Norwood-Young에서 솔루션을 수정하여 작동 시켰습니다.

답 (같은 배치는)뿐만 아니라 선택한 첫 번째 요소의 값 소요 그들 모두를 . 또한 data자바 스크립트 오류가 발생하여 초기화하거나 반환하지 않았습니다 .

새 버전은 다음과 같습니다.

function _get_values(form) {
  let data = {};
  $(form).find('input, textarea, select').each(function(x, field) {
    if (field.name) {
      if (field.name.indexOf('[]') > 0) {
        if (!$.isArray(data[field.name])) {
          data[field.name] = new Array();
        }
        for (let i = 0; i < field.selectedOptions.length; i++) {
          data[field.name].push(field.selectedOptions[i].value);
        }

      } else {
        data[field.name] = field.value;
      }
    }

  });
  return data
}

용법:

_get_values($('#form'))

참고 : name선택한 항목이 []끝에 추가 되었는지 확인해야합니다 . 예를 들면 다음과 같습니다.

<select name="favorite_colors[]" multiple="multiple">
  <option value="red">Red</option>
  <option value="green">Green</option>
  <option value="blue">Blue</option>
</select>

$("#form-id").submit(function (e) { 
  e.preventDefault();
  inputs={};
  input_serialized =  $(this).serializeArray();
  input_serialized.forEach(field => {
    inputs[field.name] = field.value;
  })
  console.log(inputs)
});