JavaScript / jQuery로 양식 데이터를 얻으려면 어떻게해야합니까?

고전적인 HTML 전용 방식으로 제출할 경우와 같이 양식의 데이터를 가져 오는 간단한 한 줄 방법이 있습니까?

예를 들면 다음과 같습니다.

<form>
    <input type="radio" name="foo" value="1" checked="checked" />
    <input type="radio" name="foo" value="0" />
    <input name="bar" value="xxx" />
    <select name="this">
        <option value="hi" selected="selected">Hi</option>
        <option value="ho">Ho</option>
</form>

산출:

{
    "foo": "1",
    "bar": "xxx",
    "this": "hi"
}

텍스트 영역, 선택, 라디오 버튼 및 확인란이 (올바르게) 포함되어 있지 않기 때문에 이와 같은 것은 너무 간단합니다.

$("#form input").each(function () {
    data[theFieldName] = theFieldValue;
});

$('form').serialize() //this produces: "foo=1&bar=xxx&this=hi"

데모

배열$('form').serializeArray() 을 반환하는 Use :

[
  {"name":"foo","value":"1"},
  {"name":"bar","value":"xxx"},
  {"name":"this","value":"hi"}
]

다른 옵션은 $('form').serialize()이며 문자열 을 반환 합니다 .

"foo=1&bar=xxx&this=hi"

이 jsfiddle 데모를 살펴보십시오

2014 년 업데이트 된 답변 : HTML5 FormData 가이를 수행

var formData = new FormData(document.querySelector('form'))

그런 다음 formData를 그대로 게시 할 수 있습니다. 여기에는 양식에 사용 된 모든 이름과 값이 포함됩니다.

에 따라 jQuery.serializeArray키-값 쌍을 반환합니다.

var data = $('#form').serializeArray().reduce(function(obj, item) {
    obj[item.name] = item.value;
    return obj;
}, {});

document.querySelector('form').addEventListener('submit', (e) => {
  const formData = new FormData(e.target);
  // Now you can use formData.get('foo'), for example.
  // Don't forget e.preventDefault() if you want to stop normal form .submission
});

이것은 별난 대답이지만 이것이 왜 더 나은 해결책인지 설명하겠습니다.

• 우리는 버튼 누르기보다는 양식 제출을 올바르게 처리하고 있습니다. 어떤 사람들은 들판에 들어가기를 좋아합니다. 어떤 사람들은 음성 입력 또는 기타 접근성 장치와 같은 대체 입력 장치를 사용합니다. 양식 제출을 처리하면 모든 사람이 올바르게 해결할 수 있습니다.

• 제출 된 실제 양식에 대한 양식 데이터를 파고 있습니다. 나중에 양식 선택기를 변경하면 모든 필드의 선택기를 변경할 필요가 없습니다. 또한 입력 이름이 동일한 여러 양식이있을 수 있습니다. 과도한 ID로 명확히 할 필요가 없으며 제출 된 양식을 기반으로 입력을 추적하기 만하면됩니다. 또한 상황에 적합한 경우 여러 양식에 단일 이벤트 핸들러를 사용할 수 있습니다.

• FormData 인터페이스는 상당히 새롭지 만 브라우저에서 잘 지원됩니다. 양식에있는 것의 실제 값을 얻기 위해 해당 데이터 콜렉션을 빌드하는 좋은 방법입니다. 그것 없이는 (와 같은) 모든 요소를 ​​반복 form.elements하고 확인 된 것, 확인되지 않은 것, 값 등을 알아 내야합니다. 오래된 브라우저 지원이 필요하다면 완전히 가능하지만 FormData 인터페이스가 더 간단합니다.

• ES6을 사용하고 있습니다 ... 어떤 요구 사항도 없으므로 이전 브라우저 지원이 필요한 경우 ES5와 호환되도록 다시 변경하십시오.

.serializeArray ()를 사용하여 데이터를 배열 형식으로 가져온 다음 객체로 변환하십시오.

function getFormObj(formId) {
    var formObj = {};
    var inputs = $('#'+formId).serializeArray();
    $.each(inputs, function (i, input) {
        formObj[input.name] = input.value;
    });
    return formObj;
}

Jquery가 필요없는 정말 간단하고 짧은 솔루션입니다.

var formElements=document.getElementById("myForm").elements;    
var postData={};
for (var i=0; i<formElements.length; i++)
    if (formElements[i].type!="submit")//we dont want to include the submit-buttom
        postData[formElements[i].name]=formElements[i].value;

2019 년이며이를 수행하는 더 좋은 방법이 있습니다.

const form = document.querySelector('form');
const data = new URLSearchParams(new FormData(form).entries());

또는 대신 일반 객체를 원할 경우

const form = document.querySelector('form');
const data = Object.fromEntries(new FormData(form).entries());

동일한 이름의 다중 선택 및 복제 확인란에서와 같이 중복 키에서는 작동하지 않습니다.

$('#myform').serialize();

나는 이것을 사용한다 :

jQuery 플러그인

(function($){
  $.fn.getFormData = function(){
    var data = {};
    var dataArray = $(this).serializeArray();
    for(var i=0;i<dataArray.length;i++){
      data[dataArray[i].name] = dataArray[i].value;
    }
    return data;
  }
})(jQuery);

HTML 양식

<form id='myform'>
  <input name='myVar1' />
  <input name='myVar2' />
</form>

데이터 입수

var myData = $("#myForm").getFormData();

$("#form input, #form select, #form textarea").each(function() {
 data[theFieldName] = theFieldValue;
});

그 외에는 serialize () 를보고 싶을 수도 있습니다 .

다음은 확인란, 라디오 버튼 및 슬라이더 (아마도 다른 입력 유형이지만 올바르게 테스트했지만)를 올바르게 처리하는 JavaScript 전용 구현입니다.

function setOrPush(target, val) {
    var result = val;
    if (target) {
        result = [target];
        result.push(val);
    }
    return result;
}

function getFormResults(formElement) {
    var formElements = formElement.elements;
    var formParams = {};
    var i = 0;
    var elem = null;
    for (i = 0; i < formElements.length; i += 1) {
        elem = formElements[i];
        switch (elem.type) {
            case 'submit':
                break;
            case 'radio':
                if (elem.checked) {
                    formParams[elem.name] = elem.value;
                }
                break;
            case 'checkbox':
                if (elem.checked) {
                    formParams[elem.name] = setOrPush(formParams[elem.name], elem.value);
                }
                break;
            default:
                formParams[elem.name] = setOrPush(formParams[elem.name], elem.value);
        }
    }
    return formParams;
}

작업 예 :

    function setOrPush(target, val) {
      var result = val;
      if (target) {
        result = [target];
        result.push(val);
      }
      return result;
    }

    function getFormResults(formElement) {
      var formElements = formElement.elements;
      var formParams = {};
      var i = 0;
      var elem = null;
      for (i = 0; i < formElements.length; i += 1) {
        elem = formElements[i];
        switch (elem.type) {
          case 'submit':
            break;
          case 'radio':
            if (elem.checked) {
              formParams[elem.name] = elem.value;
            }
            break;
          case 'checkbox':
            if (elem.checked) {
              formParams[elem.name] = setOrPush(formParams[elem.name], elem.value);
            }
            break;
          default:
            formParams[elem.name] = setOrPush(formParams[elem.name], elem.value);
        }
      }
      return formParams;
    }

    //
    // Boilerplate for running the snippet/form
    //

    function ok() {
      var params = getFormResults(document.getElementById('main_form'));
      document.getElementById('results_wrapper').innerHTML = JSON.stringify(params, null, ' ');
    }

    (function() {
      var main_form = document.getElementById('main_form');
      main_form.addEventListener('submit', function(event) {
        event.preventDefault();
        ok();
      }, false);
    })();

<form id="main_form">
  <div id="questions_wrapper">
    <p>what is a?</p>
    <div>
      <input type="radio" required="" name="q_0" value="a" id="a_0">
      <label for="a_0">a</label>
      <input type="radio" required="" name="q_0" value="b" id="a_1">
      <label for="a_1">b</label>
      <input type="radio" required="" name="q_0" value="c" id="a_2">
      <label for="a_2">c</label>
      <input type="radio" required="" name="q_0" value="d" id="a_3">
      <label for="a_3">d</label>
    </div>
    <div class="question range">
      <label for="a_13">A?</label>
      <input type="range" required="" name="q_3" id="a_13" min="0" max="10" step="1" list="q_3_dl">
      <datalist id="q_3_dl">
        <option value="0"></option>
        <option value="1"></option>
        <option value="2"></option>
        <option value="3"></option>
        <option value="4"></option>
        <option value="5"></option>
        <option value="6"></option>
        <option value="7"></option>
        <option value="8"></option>
        <option value="9"></option>
        <option value="10"></option>
      </datalist>
    </div>
    <p>A and/or B?</p>
    <div>
      <input type="checkbox" name="q_4" value="A" id="a_14">
      <label for="a_14">A</label>
      <input type="checkbox" name="q_4" value="B" id="a_15">
      <label for="a_15">B</label>
    </div>
  </div>
  <button id="btn" type="submit">OK</button>
</form>
<div id="results_wrapper"></div>

편집하다:

더 완벽한 구현을 찾고 있다면 내가 만든 프로젝트 의이 섹션을 살펴보십시오 . 나는 결국 내가 생각해 낸 완전한 솔루션 으로이 질문을 업데이트 할 것입니다. 그러나 이것은 누군가에게 도움이 될 것입니다.

jQuery를 사용하는 경우 원하는 기능을 수행하는 작은 함수가 있습니다.

먼저 양식에 ID를 추가하십시오 (페이지의 유일한 양식이 아니라면 'form'을 dom 쿼리로 사용할 수 있습니다)

<form id="some-form">
 <input type="radio" name="foo" value="1" checked="checked" />
 <input type="radio" name="foo" value="0" />
 <input name="bar" value="xxx" />
 <select name="this">
  <option value="hi" selected="selected">Hi</option>
  <option value="ho">Ho</option>
</form>

<script>
//read in a form's data and convert it to a key:value object
function getFormData(dom_query){
    var out = {};
    var s_data = $(dom_query).serializeArray();
    //transform into simple data/value object
    for(var i = 0; i<s_data.length; i++){
        var record = s_data[i];
        out[record.name] = record.value;
    }
    return out;
}

console.log(getFormData('#some-form'));
</script>

결과는 다음과 같습니다.

{
 "foo": "1",
 "bar": "xxx",
 "this": "hi"
}

FormData 객체를 사용할 수도 있습니다 . FormData 객체를 사용하면 XMLHttpRequest를 사용하여 전송할 키 / 값 쌍 세트를 컴파일 할 수 있습니다. 주로 양식 데이터를 전송하는 데 사용되지만 키 데이터를 전송하기 위해 양식과 독립적으로 사용할 수 있습니다.

        var formElement = document.getElementById("myform_id");
        var formData = new FormData(formElement);
        console.log(formData);

그러면 모든 양식 필드가 JavaScript 객체 "res"에 추가됩니다.

var res = {};
$("#form input, #form select, #form textarea").each(function(i, obj) {
    res[obj.name] = $(obj).val();
})

나는 필요한 물건을 돌려주는 대답을 포함시켰다.

function getFormData(form) {
var rawJson = form.serializeArray();
var model = {};

$.map(rawJson, function (n, i) {
    model[n['name']] = n['value'];
});

return model;
}

neuront의 응답을 기반으로 키-값 쌍으로 양식 데이터를 가져 오는 간단한 JQuery 메소드를 만들었지 만 다중 선택 및 name = 'example []'의 배열 입력에 작동합니다.

이것이 사용되는 방법입니다.

var form_data = $("#form").getFormObject();

아래 정의와 작동 방식에 대한 예를 찾을 수 있습니다.

// Function start
$.fn.getFormObject = function() {
    var object = $(this).serializeArray().reduce(function(obj, item) {
        var name = item.name.replace("[]", "");
        if ( typeof obj[name] !== "undefined" ) {
            if ( !Array.isArray(obj[name]) ) {
                obj[name] = [ obj[name], item.value ];
            } else {
               obj[name].push(item.value);
            }
        } else {
            obj[name] = item.value;
        }
        return obj;
    }, {});
    return object;
}
// Function ends

// This is how it's used
$("#getObject").click( function() {
  var form_data = $("#form").getFormObject();
  console.log(form_data);
});

/* Only to make view better ;) */
#getObject {
  padding: 10px;
  cursor:pointer;
  background:#0098EE;
  color:white;
  display:inline-block;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/2.1.3/jquery.min.js"></script>
<form id="form">
  <input type="text" name="text" value="Hola amigo" /> 
  
  <input type="text" name="text_array[]" value="Array 1" /> 
  <input type="text" name="text_array[]" value="Array 2" /> 
  <input type="text" name="text_array[]" value="Array 3" /> 
  
  <select name="multiselect" multiple>
    <option name="option1" selected> option 1 </option>
    <option name="option2" selected> option 2 </option>
  </select>
  
  <input type="checkbox" name="checkbox" value="checkbox1" checked/>
  <input type="checkbox" name="checkbox" value="checkbox2" checked/>
  
  <input type="radio" name="radio" value="radio1" checked/>
  <input type="radio" name="radio" value="radio2"/>

</form>

<div id="getObject"> Get object (check the console!) </div>

var formData = new FormData($('#form-id'));
params   = $('#form-id').serializeArray();

$.each(params, function(i, val) {
    formData.append(val.name, val.value);
});

function getFormData($form){
    var unindexed_array = $form.serializeArray();
    var indexed_array = {};

    $.map(unindexed_array, function(n, i){
        if(indexed_array[n['name']] == undefined){
            indexed_array[n['name']] = [n['value']];
        }else{
            indexed_array[n['name']].push(n['value']);
        }
    });

    return indexed_array;
}

이 함수 를 사용 하여 양식의 오브젝트 또는 JSON을 가질 수 있습니다 .

그것을 사용하십시오 :

var object = formService.getObjectFormFields("#idform");

 function  getObjectFormFields(formSelector)
        {
            /// <summary>Função que retorna objeto com base nas propriedades name dos elementos do formulário.</summary>
            /// <param name="formSelector" type="String">Seletor do formulário</param>

            var form = $(formSelector);

            var result = {};
            var arrayAuxiliar = [];
            form.find(":input:text").each(function (index, element)
            {
                var name = $(element).attr('name');

                var value = $(element).val();
                result[name] = value;
            });

            form.find(":input[type=hidden]").each(function (index, element)
            {
                var name = $(element).attr('name');
                var value = $(element).val();
                result[name] = value;
            });


            form.find(":input:checked").each(function (index, element)
            {
                var name;
                var value;
                if ($(this).attr("type") == "radio")
                {
                    name = $(element).attr('name');
                    value = $(element).val();
                    result[name] = value;
                }
                else if ($(this).attr("type") == "checkbox")
                {
                    name = $(element).attr('name');
                    value = $(element).val();
                    if (result[name])
                    {
                        if (Array.isArray(result[name]))
                        {
                            result[name].push(value);
                        } else
                        {
                            var aux = result[name];
                            result[name] = [];
                            result[name].push(aux);
                            result[name].push(value);
                        }

                    } else
                    {
                        result[name] = [];
                        result[name].push(value);
                    }
                }

            });

            form.find("select option:selected").each(function (index, element)
            {
                var name = $(element).parent().attr('name');
                var value = $(element).val();
                result[name] = value;

            });

            arrayAuxiliar = [];
            form.find("checkbox:checked").each(function (index, element)
            {
                var name = $(element).attr('name');
                var value = $(element).val();
                result[name] = arrayAuxiliar.push(value);
            });

            form.find("textarea").each(function (index, element)
            {
                var name = $(element).attr('name');
                var value = $(element).val();
                result[name] = value;
            });

            return result;
        }

이 문제를 해결하기 위해 라이브러리를 작성했습니다 .JSONForms . 형식을 취하고 각 입력을 거치며 쉽게 읽을 수있는 JSON 객체를 만듭니다.

다음과 같은 양식이 있다고 가정하십시오.

<form enctype='application/json'>
  <input name='places[0][city]' value='New York City'>
  <input type='number' name='places[0][population]' value='8175133'>
  <input name='places[1][city]' value='Los Angeles'>
  <input type='number' name='places[1][population]' value='3792621'>
  <input name='places[2][city]' value='Chicago'>
  <input type='number' name='places[2][population]' value='2695598'>
</form>

양식을 JSONForms의 encode 메소드에 전달하면 다음 오브젝트가 리턴됩니다.

{
  "places": [
    {
      "city": "New York City",
      "population": 8175133
    },
    {
      "city": "Los Angeles",
      "population": 3792621
    },
    {
      "city": "Chicago",
      "population": 2695598
    }
  ]
}

다음 은 귀하의 양식에 대한 데모 입니다.

$( "form" ).bind( "submit", function(e) {
    e.preventDefault();
    
    console.log(  $(this).serializeObject() );    

    //console.log(  $(this).serialize() );
    //console.log(  $(this).serializeArray() );

});


$.fn.serializeObject = function() {
    var o = {};
    var a = this.serializeArray();

    $.each( a, function() {
        if ( o[this.name] !== undefined) 
        {
            if ( ! o[this.name].push ) 
            {
                o[this.name] = [o[this.name]];
            }
            o[this.name].push(this.value || '');
        }
        else 
        {
            o[this.name] = this.value || '';
        }
    });

    return o;
};

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

<form>

    <input type="radio" name="foo" value="1" checked="checked" />
    <input type="radio" name="foo" value="0" />
    <input name="bar" value="xxx" />

    <select name="this">
        <option value="hi" selected="selected">Hi</option>
        <option value="ho">Ho</option>
    </select>

    <input type="submit" value="Submit" />

</form>

코드 펜

Object직렬화 된 문자열 (에 의해 반환 된 문자열 $(form).serialize()및 약간의 개선과 같은)을 선호하는 사람들은 $(form).serializeArray()아래 코드를 자유롭게 사용하십시오.

var Form = {
    _form: null,
    _validate: function(){
        if(!this._form || this._form.tagName.toLowerCase() !== "form") return false;
        if(!this._form.elements.length) return false;
    }, _loopFields: function(callback){
        var elements = this._form.elements;
        for(var i = 0; i < elements.length; i++){
            var element = form.elements[i];
            if(name !== ""){
                callback(this._valueOfField(element));
            }
        }
    }, _valueOfField: function(element){
        var type = element.type;
        var name = element.name.trim();
        var nodeName = element.nodeName.toLowerCase();
        switch(nodeName){
            case "input":
                if(type === "radio" || type === "checkbox"){
                    if(element.checked){
                        return element.value;
                    }
                }
                return element.value;
                break;
            case "select":
                if(type === "select-multiple"){
                    for(var i = 0; i < element.options.length; i++){
                        if(options[i].selected){
                            return element.value;
                        }
                    }
                }
                return element.value;
                break;
            case "button":
                switch(type){
                    case "reset": 
                    case "submit": 
                    case "button":
                        return element.value;
                        break;
                }
                break;
        } 
    }, serialize: function(form){
        var data = {};
        this._form = form;

        if(this._validate()){
            this._loopFields(function(value){
                if(value !== null) data[name] = value;
            });
        }
        return data;
    }
};

그것을 실행하려면 그냥 사용 Form.serialize(form)하면 함수는 다음 Object과 비슷한 것을 반환합니다 .

<!-- { username: "username", password: "password" } !-->
<input type="text" value="username">
<input type="password" value="password">

보너스로, 하나의 직렬화 기능을 위해 전체 jQuery 번들을 설치할 필요가 없습니다 .

여러 개의 확인란과 여러 개의 선택을 처리하는 기능을 작성했습니다. 이 경우 배열을 반환합니다.

function getFormData(formId) {
    return $('#' + formId).serializeArray().reduce(function (obj, item) {
        var name = item.name,
            value = item.value;

        if (obj.hasOwnProperty(name)) {
            if (typeof obj[name] == "string") {
                obj[name] = [obj[name]];
                obj[name].push(value);
            } else {
                obj[name].push(value);
            }
        } else {
            obj[name] = value;
        }
        return obj;
    }, {});
}

페이지 새로 고침없이 양식을 제출하고 여기에 파일 포함으로 모든 값을 가져 오기 위해 양식 입력 요소 필드 및 입력 파일을 표시합니다.

<form id="imageUploadForm"   action="" method="post" enctype="multipart/form-data">
<input type="text" class="form-control" id="fname" name='fname' placeholder="First Name" >
<input type="text" class="form-control" name='lname' id="lname" placeholder="Last Name">
<input type="number" name='phoneno'  class="form-control" id="phoneno" placeholder="Phone Number">
<textarea class="form-control" name='address' id="address" rows="5" cols="5" placeholder="Your Address"></textarea>
<input type="file" name="file" id="file" >
<input type="submit" id="sub" value="Registration">					   
</form>

$('#imageUploadForm').on('submit',(function(e) 
{
     fname = $('#fname').val();
     lname =  $('#lname').val();
     address =  $('#address').val();
     phoneno =  $('#phoneno').val();
     file =  $('#file').val();
     e.preventDefault();
     var formData = new FormData(this);
     formData.append('file', $('#file')[0]);
     formData.append('fname',$('#fname').val());
     formData.append('lname',$('#lname').val());
     formData.append('phoneno',$('#phoneno').val());
     formData.append('address',$('#address').val());
     $.ajax({
		type:'POST',
                url: "test.php",
                //url: '<?php echo base_url().'edit_profile/edit_profile2';?>',

                data:formData,
                cache:false,
                contentType: false,
                processData: false,
                success:function(data)
                {
                     alert('Data with file are submitted !');

                }

     });

}))

$(form).serializeArray().reduce(function (obj, item) {
      if (obj[item.name]) {
           if ($.isArray(obj[item.name])) {
               obj[item.name].push(item.value);
           } else {
                var previousValue = obj[item.name];
                obj[item.name] = [previousValue, item.value];
           }
      } else {
           obj[item.name] = item.value;
      }

     return obj;
}, {});

다중 선택에서 작동하지 않는 문제를 해결합니다.

당신은 모두 완전히 정확하지 않습니다. 당신은 쓸 수 없습니다 :

formObj[input.name] = input.value;

이 방법으로 다중 선택 목록이있는 경우 "param1": "value1", "param1": "value2"로 전송되므로 마지막 값으로 값을 덮어 씁니다.

따라서 올바른 접근 방식은 다음과 같습니다.

if (formData[input.name] === undefined) {
    formData[input.name] = input.value;
}
else {
    var inputFieldArray = $.merge([], $.isArray(formData[input.name]) ? formData[input.name] : [formData[input.name]]);
    $.merge(inputFieldArray, [input.value]);
    formData[input.name] = $.merge([], inputFieldArray);
}

이 방법으로해야합니다. 양식 데이터를 직렬화 한 다음 객체로 변환합니다. 확인란 그룹도 관리합니다.

function getFormObj(formId) {
  var formParams = {};
  $('#' + formId)
    .serializeArray()
    .forEach(function(item) {
      if (formParams[item.name]) {
        formParams[item.name] = [formParams[item.name]];
        formParams[item.name].push(item.value)
      } else {
        formParams[item.name] = item.value
      }
    });
  return formParams;
}

다음은 양식 데이터를 객체로 추출하기 위해 작성한 멋진 바닐라 JS 함수입니다. 또한 객체에 추가를 삽입하고 양식 입력 필드를 지우는 옵션도 있습니다.

const extractFormData = ({ form, clear, add }) => {
  return [].slice.call(form.children).filter(node => node.nodeName === 'INPUT')
  .reduce((formData, input) => {
    const value = input.value
    if (clear) { input.value = '' }
    return {
      ...formData,
      [input.name]: value
    }
  }, add)
}

다음은 게시 요청과 함께 사용하는 예입니다.

submitGrudge(e) {
  e.preventDefault()

  const form = e.target
  const add = { id: Date.now(), forgiven: false }
  const grudge = extractFormData({ form, add, clear: true })

  // grudge = {
  //  "name": "Example name",
  //  "offense": "Example string",
  //  "date": "2017-02-16",
  //  "id": 1487877281983,
  //  "forgiven": false
  // }

  fetch('http://localhost:3001/api/grudge', {
    method: 'post',
    headers: { 'Content-Type': 'application/json' },
    body: JSON.stringify(grudge)
  })
    .then(response => response.json())
    .then(grudges => this.setState({ grudges }))
    .catch(err => console.log('error: ', err))
}