Bagaimana saya bisa mendapatkan data formulir dengan JavaScript / jQuery?

Apakah ada cara sederhana, satu-baris untuk mendapatkan data formulir seperti jika akan dikirimkan dengan cara klasik HTML saja?

Sebagai contoh:

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

Keluaran:

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

Sesuatu seperti ini terlalu sederhana, karena tidak (dengan benar) memasukkan teks, pilihan, tombol radio dan kotak centang:

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

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

demo

Gunakan $('form').serializeArray(), yang mengembalikan array :

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

Opsi lainnya adalah $('form').serialize(), yang mengembalikan string :

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

Lihatlah demo jsfiddle ini

Jawaban yang diperbarui untuk 2014: HTML5 FormData melakukan ini

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

Anda kemudian dapat memposting formData persis seperti itu - itu berisi semua nama dan nilai yang digunakan dalam formulir.

Berdasarkan jQuery.serializeArray, mengembalikan pasangan nilai kunci.

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

Ini adalah jawaban yang membingungkan, tetapi izinkan saya menjelaskan mengapa ini adalah solusi yang lebih baik:

• Kami benar menangani pengiriman formulir daripada menekan tombol. Beberapa orang suka menekan enter pada bidang. Beberapa orang menggunakan perangkat input alternatif seperti input ucapan atau perangkat aksesibilitas lainnya. Menangani formulir kirim dan Anda menyelesaikannya dengan benar untuk semua orang.

• Kami sedang menggali data formulir untuk formulir aktual yang dikirimkan. Jika Anda mengubah pemilih formulir Anda nanti, Anda tidak perlu mengubah pemilih untuk semua bidang. Selain itu, Anda mungkin memiliki beberapa formulir dengan nama input yang sama. Tidak perlu bingung dengan ID yang berlebihan dan yang tidak, cukup lacak input berdasarkan formulir yang dikirimkan. Ini juga memungkinkan Anda untuk menggunakan penangan peristiwa tunggal untuk berbagai bentuk jika itu sesuai untuk situasi Anda.

• Antarmuka FormData cukup baru, tetapi didukung dengan baik oleh browser. Ini cara yang bagus untuk membangun pengumpulan data untuk mendapatkan nilai nyata dari apa yang ada di formulir. Tanpa itu, Anda harus mengulang semua elemen (seperti dengan form.elements) dan mencari tahu apa yang diperiksa, apa yang tidak, apa nilainya, dll. Sangat mungkin jika Anda memerlukan dukungan browser lama, tetapi FormData antarmuka lebih sederhana.

• Saya menggunakan ES6 di sini ... bukan persyaratan dengan cara apa pun, jadi ubah kembali agar kompatibel dengan ES5 jika Anda memerlukan dukungan browser lama.

gunakan .serializeArray () untuk mendapatkan data dalam format array dan kemudian mengubahnya menjadi objek:

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

Inilah soluton yang sangat sederhana dan singkat yang bahkan tidak memerlukan 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;

Ini tahun 2019 dan ada cara yang lebih baik untuk melakukan ini:

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

atau jika Anda menginginkan Obyek polos sebagai gantinya

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

meskipun perhatikan bahwa ini tidak akan berfungsi dengan kunci duplikat seperti yang Anda dapatkan dari kotak centang multi-pilih dan duplikat dengan nama yang sama.

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

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

selain itu, Anda mungkin ingin melihat serialize () ;

Saya menggunakan ini:

Plugin 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);

Formulir HTML

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

Dapatkan Data

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

Berikut ini adalah implementasi hanya JavaScript yang berfungsi dengan benar menangani kotak centang, tombol radio, dan slider (mungkin tipe input lain juga, tapi saya hanya menguji ini).

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

Contoh kerja:

    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>

edit:

Jika Anda mencari implementasi yang lebih lengkap, maka lihatlah bagian dari proyek yang saya buat ini . Saya akan memperbarui pertanyaan ini pada akhirnya dengan solusi lengkap yang saya buat, tetapi mungkin ini akan membantu seseorang.

Jika Anda menggunakan jQuery, berikut adalah sedikit fungsi yang akan melakukan apa yang Anda cari.

Pertama, tambahkan ID ke formulir Anda (kecuali jika itu adalah satu-satunya formulir pada halaman, maka Anda bisa menggunakan 'formulir' sebagai permintaan 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>

Outputnya akan terlihat seperti:

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

Anda juga bisa menggunakan Objek FormData ; Objek FormData memungkinkan Anda mengkompilasi satu set pasangan kunci / nilai untuk dikirim menggunakan XMLHttpRequest. Ini terutama dimaksudkan untuk digunakan dalam mengirim data formulir, tetapi dapat digunakan secara independen dari formulir untuk mengirimkan data kunci.

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

Ini akan menambahkan semua bidang formulir ke objek JavaScript "res":

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

Saya telah menyertakan jawaban untuk juga memberikan kembali objek yang diperlukan.

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

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

return model;
}

Berdasarkan respons neuront, saya membuat metode JQuery sederhana yang mendapatkan formulir data dalam pasangan nilai kunci tetapi berfungsi untuk multi-seleksi dan untuk input array dengan nama = 'example []'.

Beginilah cara ini digunakan:

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

Anda dapat menemukan contoh di bawah ini tentang definisi dan cara kerjanya.

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

Anda dapat menggunakan fungsi ini untuk memiliki objek atau JSON dari formulir.

untuk menggunakannya:

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

Saya menulis perpustakaan untuk mengatasi masalah ini: JSONForms . Dibutuhkan formulir, melewati setiap input dan membangun objek JSON yang dapat Anda baca dengan mudah.

Katakanlah Anda memiliki formulir berikut:

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

Melewati formulir ke metode penyandian JSONForms mengembalikan Anda objek berikut:

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

Ini demo dengan formulir Anda.

$( "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>

Codepen

Bagi Anda yang lebih suka yang Objectbertentangan dengan string serial (seperti yang dikembalikan oleh $(form).serialize(), dan sedikit perbaikan $(form).serializeArray()), jangan ragu untuk menggunakan kode di bawah ini:

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

Untuk menjalankannya, cukup gunakan Form.serialize(form)dan fungsinya akan mengembalikan yang Objectserupa dengan ini:

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

Sebagai bonus, itu berarti Anda tidak perlu menginstal seluruh bundel jQuery hanya untuk satu fungsi serialisasi.

Saya menulis fungsi yang menangani beberapa kotak centang dan beberapa pilihan. Dalam kasus itu mengembalikan array.

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;
    }, {});
}

menampilkan kolom isian form input dan file input untuk mengirimkan form Anda tanpa me-refresh halaman dan ambil semua nilai dengan file yang termasuk di dalamnya

<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;
}, {});

Ini akan memperbaiki masalah: tidak dapat bekerja dengan multiselek.

Anda semua tidak sepenuhnya benar. Anda tidak dapat menulis:

formObj[input.name] = input.value;

Karena dengan cara ini jika Anda memiliki daftar multiselect - nilainya akan ditimpa dengan yang terakhir, karena ditransmisikan sebagai: "param1": "value1", "param1": "value2".

Jadi, pendekatan yang benar adalah:

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

Metode ini harus melakukannya. Ini membuat cerita berseri data formulir dan kemudian mengubahnya menjadi objek. Mengurus kelompok kotak centang juga.

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

Berikut adalah fungsi JS vanilla yang bagus yang saya tulis untuk mengekstrak data formulir sebagai objek. Ini juga memiliki opsi untuk memasukkan tambahan ke objek, dan untuk membersihkan bidang input formulir.

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

Berikut ini adalah contoh penggunaannya dengan permintaan pos:

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