Bagaimana cara mengonversi semua elemen formulir saya ke objek JavaScript?

Saya ingin memiliki beberapa cara untuk secara otomatis membangun objek JavaScript dari formulir saya, tanpa harus mengulang setiap elemen. Saya tidak ingin string, seperti yang dikembalikan oleh $('#formid').serialize();, saya juga tidak ingin peta dikembalikan oleh$('#formid').serializeArray();

serializeArraysudah melakukan hal itu. Anda hanya perlu memijat data ke dalam format yang Anda butuhkan:

function objectifyForm(formArray) {//serialize data function

  var returnArray = {};
  for (var i = 0; i < formArray.length; i++){
    returnArray[formArray[i]['name']] = formArray[i]['value'];
  }
  return returnArray;
}

Perhatikan bidang tersembunyi yang memiliki nama yang sama dengan input asli karena akan ditimpa.

Konversikan formulir ke JSON seperti bos

Sumber saat ini ada di GitHub dan Bower .

$ bower instal jquery-serialize-object

Kode berikut sekarang sudah tidak digunakan lagi .

Kode berikut dapat bekerja dengan semua jenis nama input; dan menanganinya seperti yang Anda harapkan.

Sebagai contoh:

<!-- All of these will work! -->
<input name="honey[badger]" value="a">
<input name="wombat[]" value="b">
<input name="hello[panda][]" value="c">
<input name="animals[0][name]" value="d">
<input name="animals[0][breed]" value="e">
<input name="crazy[1][][wonky]" value="f">
<input name="dream[as][vividly][as][you][can]" value="g">

// Output
{
  "honey":{
    "badger":"a"
  },
  "wombat":["b"],
  "hello":{
    "panda":["c"]
  },
  "animals":[
    {
      "name":"d",
      "breed":"e"
    }
  ],
  "crazy":[
    null,
    [
      {"wonky":"f"}
    ]
  ],
  "dream":{
    "as":{
      "vividly":{
        "as":{
          "you":{
            "can":"g"
          }
        }
      }
    }
  }
}

Pemakaian

$('#my-form').serializeObject();

The Sorcery (JavaScript)

(function($){
    $.fn.serializeObject = function(){

        var self = this,
            json = {},
            push_counters = {},
            patterns = {
                "validate": /^[a-zA-Z][a-zA-Z0-9_]*(?:\[(?:\d*|[a-zA-Z0-9_]+)\])*$/,
                "key":      /[a-zA-Z0-9_]+|(?=\[\])/g,
                "push":     /^$/,
                "fixed":    /^\d+$/,
                "named":    /^[a-zA-Z0-9_]+$/
            };


        this.build = function(base, key, value){
            base[key] = value;
            return base;
        };

        this.push_counter = function(key){
            if(push_counters[key] === undefined){
                push_counters[key] = 0;
            }
            return push_counters[key]++;
        };

        $.each($(this).serializeArray(), function(){

            // Skip invalid keys
            if(!patterns.validate.test(this.name)){
                return;
            }

            var k,
                keys = this.name.match(patterns.key),
                merge = this.value,
                reverse_key = this.name;

            while((k = keys.pop()) !== undefined){

                // Adjust reverse_key
                reverse_key = reverse_key.replace(new RegExp("\\[" + k + "\\]$"), '');

                // Push
                if(k.match(patterns.push)){
                    merge = self.build([], self.push_counter(reverse_key), merge);
                }

                // Fixed
                else if(k.match(patterns.fixed)){
                    merge = self.build([], k, merge);
                }

                // Named
                else if(k.match(patterns.named)){
                    merge = self.build({}, k, merge);
                }
            }

            json = $.extend(true, json, merge);
        });

        return json;
    };
})(jQuery);

Ada apa dengan:

var data = {};
$(".form-selector").serializeArray().map(function(x){data[x.name] = x.value;}); 

Versi tetap dari solusi Tobias Cohen. Yang ini dengan benar menangani nilai-nilai palsu seperti 0dan ''.

jQuery.fn.serializeObject = function() {
  var arrayData, objectData;
  arrayData = this.serializeArray();
  objectData = {};

  $.each(arrayData, function() {
    var value;

    if (this.value != null) {
      value = this.value;
    } else {
      value = '';
    }

    if (objectData[this.name] != null) {
      if (!objectData[this.name].push) {
        objectData[this.name] = [objectData[this.name]];
      }

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

  return objectData;
};

Dan versi CoffeeScript untuk kenyamanan pengkodean Anda:

jQuery.fn.serializeObject = ->
  arrayData = @serializeArray()
  objectData = {}

  $.each arrayData, ->
    if @value?
      value = @value
    else
      value = ''

    if objectData[@name]?
      unless objectData[@name].push
        objectData[@name] = [objectData[@name]]

      objectData[@name].push value
    else
      objectData[@name] = value

  return objectData

Saya suka menggunakan Array.prototype.reducekarena ini adalah one-liner, dan tidak bergantung pada Underscore.js atau sejenisnya:

$('#formid').serializeArray()
    .reduce(function(a, x) { a[x.name] = x.value; return a; }, {});

Ini mirip dengan jawaban yang digunakan Array.prototype.map, tetapi Anda tidak perlu mengacaukan ruang lingkup Anda dengan variabel objek tambahan. Belanja satu atap.

CATATAN PENTING : Formulir dengan input yang memiliki nameatribut duplikat adalah HTML yang valid, dan sebenarnya merupakan pendekatan umum. Menggunakan salah satu jawaban di utas ini akan tidak sesuai dalam kasus itu (karena kunci objek harus unik).

Semua jawaban ini tampak sangat berlebihan bagi saya. Ada sesuatu yang bisa dikatakan untuk kesederhanaan. Selama semua input formulir Anda memiliki atribut nama yang ditetapkan, ini seharusnya hanya berfungsi.

$('form.myform').submit(function () {
  var $this = $(this)
    , viewArr = $this.serializeArray()
    , view = {};

  for (var i in viewArr) {
    view[viewArr[i].name] = viewArr[i].value;
  }

  //Do stuff with view object here (e.g. JSON.stringify?)
});

Tidak ada cara untuk melakukan ini tanpa memeriksa setiap elemen. Apa yang benar-benar ingin Anda ketahui adalah "sudahkah orang lain menulis metode yang mengubah formulir menjadi objek JSON?" Sesuatu seperti yang berikut ini seharusnya berfungsi - perhatikan bahwa itu hanya akan memberi Anda elemen bentuk yang akan dikembalikan melalui POST (harus memiliki nama). Ini tidak diuji .

function formToJSON( selector )
{
     var form = {};
     $(selector).find(':input[name]:enabled').each( function() {
         var self = $(this);
         var name = self.attr('name');
         if (form[name]) {
            form[name] = form[name] + ',' + self.val();
         }
         else {
            form[name] = self.val();
         }
     });

     return form;
}

Jika Anda menggunakan Underscore.js, Anda dapat menggunakan yang relatif ringkas:

_.object(_.map($('#myform').serializeArray(), _.values))

Saya memeriksa bahwa ada masalah dengan semua jawaban lainnya, bahwa jika nama input adalah array, seperti name[key], maka harus dihasilkan seperti ini:

name:{ key : value }

Misalnya: Jika Anda memiliki formulir HTML yang mirip dengan yang di bawah ini:

<form>
    <input name="name" value="value" >
    <input name="name1[key1]" value="value1" >
    <input name="name2[key2]" value="value2" >
    <input name="name3[key3]" value="value3" >
</form>

Tetapi harus dihasilkan seperti JSON di bawah ini, dan tidak menjadi objek seperti berikut dengan semua jawaban lainnya. Jadi, jika ada yang ingin membawa sesuatu seperti JSON berikut, coba kode JS di bawah ini.

{
    name  : 'value',
    name1 : { key1 : 'value1' },
    name2 : { key2 : 'value2' },
    name3 : { key2 : 'value2' }
}

$.fn.getForm2obj = function() {
  var _ = {};
  $.map(this.serializeArray(), function(n) {
    const keys = n.name.match(/[a-zA-Z0-9_]+|(?=\[\])/g);
    if (keys.length > 1) {
      let tmp = _;
      pop = keys.pop();
      for (let i = 0; i < keys.length, j = keys[i]; i++) {
        tmp[j] = (!tmp[j] ? (pop == '') ? [] : {} : tmp[j]), tmp = tmp[j];
      }
      if (pop == '') tmp = (!Array.isArray(tmp) ? [] : tmp), tmp.push(n.value);
      else tmp[pop] = n.value;
    } else _[keys.pop()] = n.value;
  });
  return _;
}
console.log($('form').getForm2obj());
$('form input').change(function() {
  console.clear();
  console.log($('form').getForm2obj());
});

<script src="https://code.jquery.com/jquery-3.2.1.min.js"></script>
<form>
  <input name="name" value="value">
  <input type="checkbox" name="name1[]" value="1" checked="checked">1
  <input type="checkbox" name="name1[]" value="2">2
  <input type="checkbox" name="name1[]" value="3">3<br>
  <input type="radio" name="gender" value="male" checked="checked">male
  <input type="radio" name="gender" value="female"> female
  <input name="name2[key1]" value="value1">
  <input name="one[another][another_one]" value="value4">
  <input name="name3[1][name]" value="value4">
  <input name="name3[2][name]" value="value4">
  <input name="[]" value="value5">
</form>

Ok, saya tahu ini sudah memiliki jawaban yang sangat terunggul, tetapi pertanyaan serupa lainnya diajukan baru-baru ini, dan saya juga diarahkan ke pertanyaan ini. Saya juga ingin menawarkan solusi saya, karena ia menawarkan keuntungan dibandingkan solusi yang diterima: Anda dapat menyertakan elemen formulir yang dinonaktifkan (yang kadang-kadang penting, tergantung pada bagaimana fungsi UI Anda)

Ini jawaban saya dari pertanyaan SO lainnya :

Awalnya, kami menggunakan serializeArray()metode jQuery , tetapi itu tidak termasuk elemen formulir yang dinonaktifkan. Kami akan sering menonaktifkan elemen formulir yang "disinkronkan" ke sumber lain di halaman, tetapi kami masih perlu memasukkan data ke objek serial kami. Begitu serializeArray()juga keluar. Kami menggunakan :inputpemilih untuk mendapatkan semua elemen input (baik diaktifkan dan dinonaktifkan) dalam wadah yang diberikan, dan kemudian $.map()untuk membuat objek kami.

var inputs = $("#container :input");
var obj = $.map(inputs, function(n, i)
{
    var o = {};
    o[n.name] = $(n).val();
    return o;
});
console.log(obj);

Perhatikan bahwa agar ini berfungsi, setiap input Anda akan memerlukan nameatribut, yang akan menjadi nama properti dari objek yang dihasilkan.

Itu sebenarnya sedikit dimodifikasi dari apa yang kami gunakan. Kami perlu membuat objek yang terstruktur sebagai .NET IDictionary, jadi kami menggunakan ini: (Saya berikan di sini jika berguna)

var obj = $.map(inputs, function(n, i)
{
    return { Key: n.name, Value: $(n).val() };
});
console.log(obj);

Saya suka kedua solusi ini, karena mereka adalah penggunaan $.map()fungsi yang sederhana , dan Anda memiliki kontrol penuh atas pemilih Anda (jadi, elemen mana yang Anda akhirnya termasuk dalam objek yang Anda hasilkan). Juga, tidak diperlukan plugin tambahan. JQuery tua polos.

Fungsi ini harus menangani array multidimensi bersama dengan beberapa elemen dengan nama yang sama.

Saya telah menggunakannya selama beberapa tahun sejauh ini:

jQuery.fn.serializeJSON=function() {
  var json = {};
  jQuery.map(jQuery(this).serializeArray(), function(n, i) {
    var _ = n.name.indexOf('[');
    if (_ > -1) {
      var o = json;
      _name = n.name.replace(/\]/gi, '').split('[');
      for (var i=0, len=_name.length; i<len; i++) {
        if (i == len-1) {
          if (o[_name[i]]) {
            if (typeof o[_name[i]] == 'string') {
              o[_name[i]] = [o[_name[i]]];
            }
            o[_name[i]].push(n.value);
          }
          else o[_name[i]] = n.value || '';
        }
        else o = o[_name[i]] = o[_name[i]] || {};
      }
    }
    else {
      if (json[n.name] !== undefined) {
        if (!json[n.name].push) {
          json[n.name] = [json[n.name]];
        }
        json[n.name].push(n.value || '');
      }
      else json[n.name] = n.value || '';      
    }
  });
  return json;
};

Kamu bisa melakukan ini:

var frm = $(document.myform);
var data = JSON.stringify(frm.serializeArray());

Lihat JSON .

One-liner (tidak ada dependensi selain jQuery), menggunakan pengikatan objek tetap untuk fungsi yang diteruskan ke mapmetode.

$('form').serializeArray().map(function(x){this[x.name] = x.value; return this;}.bind({}))[0]

Apa itu?

"id=2&value=1&comment=ok" => Object { id: "2", value: "1", comment: "ok" }

cocok untuk aplikasi web progresif (orang dapat dengan mudah mendukung aksi pengiriman formulir reguler serta permintaan ajax)

Menggunakan:

function form_to_json (selector) {
  var ary = $(selector).serializeArray();
  var obj = {};
  for (var a = 0; a < ary.length; a++) obj[ary[a].name] = ary[a].value;
  return obj;
}

Keluaran:

{"myfield": "myfield value", "passwordfield": "mypasswordvalue"}

Kesederhanaan adalah yang terbaik di sini. Saya telah menggunakan pengganti string sederhana dengan ekspresi reguler, dan mereka bekerja seperti pesona sejauh ini. Saya bukan ahli ekspresi reguler, tetapi saya yakin Anda bahkan dapat mengisi objek yang sangat kompleks.

var values = $(this).serialize(),
attributes = {};

values.replace(/([^&]+)=([^&]*)/g, function (match, name, value) {
    attributes[name] = value;
});

Dari beberapa jawaban yang lebih tua :

$('form input, form select').toArray().reduce(function(m,e){m[e.name] = $(e).val(); return m;},{})

Saya menemukan masalah dengan kode Tobias Cohen (saya tidak punya cukup poin untuk mengomentarinya secara langsung), yang jika tidak berfungsi untuk saya. Jika Anda memiliki dua opsi pilih dengan nama yang sama, keduanya dengan nilai = "", kode asli akan menghasilkan "nama": "" bukannya "nama": ["", ""]

Saya pikir ini dapat diperbaiki dengan menambahkan "|| o [this.name] == ''" ke kondisi if pertama:

$.fn.serializeObject = function()
{
    var o = {};
    var a = this.serializeArray();
    $.each(a, function() {
        if (o[this.name] || o[this.name] == '') {
            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;
};

Menggunakan solusi maček , saya memodifikasinya agar berfungsi dengan cara ASP.NET MVC menangani objek bersarang / kompleks pada formulir yang sama. Yang harus Anda lakukan adalah memodifikasi bagian validasi untuk ini:

"validate": /^[a-zA-Z][a-zA-Z0-9_]*((?:\[(?:\d*|[a-zA-Z0-9_]+)\])*(?:\.)[a-zA-Z][a-zA-Z0-9_]*)*$/,

Ini akan cocok dan kemudian memetakan elemen dengan nama seperti:

<input type="text" name="zooName" />

Dan

<input type="text" name="zooAnimals[0].name" />

cara paling sederhana dan paling akurat saya ditemukan untuk masalah ini adalah menggunakan bbq Plugin atau ini salah satu (yaitu sekitar 0.5K byte ukuran).

ini juga bekerja dengan array multi dimensi.

$.fn.serializeObject = function()
{
	return $.deparam(this.serialize());
};

Ada plugin untuk melakukannya untuk jQuery, jquery.serializeJSON . Saya telah menggunakannya dengan sukses pada beberapa proyek sekarang. Itu bekerja seperti pesona.

const formData = new FormData(form);

let formDataJSON = {};

for (const [key, value] of formData.entries()) {

    formDataJSON[key] = value;
}

Saya lebih suka pendekatan ini karena: Anda tidak perlu mengulangi lebih dari 2 koleksi, Anda bisa mendapatkan hal-hal selain "nama" dan "nilai" jika Anda perlu, dan Anda dapat membersihkan nilai-nilai Anda sebelum menyimpannya di objek ( jika Anda memiliki nilai default yang tidak ingin Anda simpan, misalnya).

$.formObject = function($o) {
    var o = {},
        real_value = function($field) {
            var val = $field.val() || "";

            // additional cleaning here, if needed

            return val;
        };

    if (typeof o != "object") {
        $o = $(o);
    }

    $(":input[name]", $o).each(function(i, field) {
        var $field = $(field),
            name = $field.attr("name"),
            value = real_value($field);

        if (o[name]) {
            if (!$.isArray(o[name])) {
                o[name] = [o[name]];
            }

            o[name].push(value);
        }

        else {
            o[name] = value;
        }
    });

    return o;
}

Gunakan seperti ini:

var obj = $.formObject($("#someForm"));

Hanya diuji di Firefox.

Mengubah apa pun menjadi objek (bukan unit yang diuji)

<script type="text/javascript">
string = {};

string.repeat = function(string, count)
{
    return new Array(count+1).join(string);
}

string.count = function(string)
{
    var count = 0;

    for (var i=1; i<arguments.length; i++)
    {
        var results = string.match(new RegExp(arguments[i], 'g'));
        count += results ? results.length : 0;
    }

    return count;
}

array = {};

array.merge = function(arr1, arr2)
{
    for (var i in arr2)
    {
        if (arr1[i] && typeof arr1[i] == 'object' && typeof arr2[i] == 'object')
            arr1[i] = array.merge(arr1[i], arr2[i]);
        else
            arr1[i] = arr2[i]
    }

    return arr1;
}

array.print = function(obj)
{
    var arr = [];
    $.each(obj, function(key, val) {
        var next = key + ": ";
        next += $.isPlainObject(val) ? array.print(val) : val;
        arr.push( next );
      });

    return "{ " +  arr.join(", ") + " }";
}

node = {};

node.objectify = function(node, params)
{
    if (!params)
        params = {};

    if (!params.selector)
        params.selector = "*";

    if (!params.key)
        params.key = "name";

    if (!params.value)
        params.value = "value";

    var o = {};
    var indexes = {};

    $(node).find(params.selector+"["+params.key+"]").each(function()
    {
        var name = $(this).attr(params.key),
            value = $(this).attr(params.value);

        var obj = $.parseJSON("{"+name.replace(/([^\[]*)/, function()
        {
            return '"'+arguments[1]+'"';
        }).replace(/\[(.*?)\]/gi, function()
        {
            if (arguments[1].length == 0)
            {
                var index = arguments[3].substring(0, arguments[2]);
                indexes[index] = indexes[index] !== undefined ? indexes[index]+1 : 0;

                return ':{"'+indexes[index]+'"';
            }
            else
                return ':{"'+escape(arguments[1])+'"';
        })+':"'+value.replace(/[\\"]/gi, function()
        {
            return "\\"+arguments[0]; 
        })+'"'+string.repeat('}', string.count(name, ']'))+"}");

        o = array.merge(o, obj);
    });

    return o;
}
</script>

Output dari tes:

$(document).ready(function()
{
    console.log(array.print(node.objectify($("form"), {})));
    console.log(array.print(node.objectify($("form"), {selector: "select"})));
});

di

<form>
    <input name='input[a]' type='text' value='text'/>
    <select name='input[b]'>
        <option>select</option>
    </select>

    <input name='otherinput[c][a]' value='a'/>
    <input name='otherinput[c][]' value='b'/>
    <input name='otherinput[d][b]' value='c'/>
    <input name='otherinput[c][]' value='d'/>

    <input type='hidden' name='anotherinput' value='hidden'/>
    <input type='hidden' name='anotherinput' value='1'/>

    <input type='submit' value='submit'/>
</form>

akan menghasilkan:

{ input: { a: text, b: select }, otherinput: { c: { a: a, 0: b, 1: d }, d: { b: c } }, anotherinput: 1 }
{ input: { b: select } }

Saya menemukan masalah dengan solusi yang dipilih.

Saat menggunakan formulir yang memiliki nama berbasis array, fungsi jQuery serializeArray () benar-benar mati.

Saya memiliki kerangka kerja PHP yang menggunakan nama bidang berbasis array untuk memungkinkan formulir yang sama dimasukkan ke halaman yang sama beberapa kali dalam banyak tampilan. Ini bisa berguna untuk menambahkan, mengedit, dan menghapus keduanya pada halaman yang sama tanpa model formulir yang saling bertentangan.

Karena saya ingin mengesahkan formulir tanpa harus mengeluarkan fungsionalitas basis absolut ini, saya memutuskan untuk menulis seralizeArray saya sendiri ():

        var $vals = {};

        $("#video_edit_form input").each(function(i){
            var name = $(this).attr("name").replace(/editSingleForm\[/i, '');

            name = name.replace(/\]/i, '');

            switch($(this).attr("type")){
                case "text":
                    $vals[name] = $(this).val();
                    break;
                case "checkbox":
                    if($(this).attr("checked")){
                        $vals[name] = $(this).val();
                    }
                    break;
                case "radio":
                    if($(this).attr("checked")){
                        $vals[name] = $(this).val();
                    }
                    break;
                default:
                    break;
            }
        });

Harap dicatat: Ini juga berfungsi di luar form submit () jadi jika kesalahan terjadi di sisa kode Anda, form tidak akan mengirimkan jika Anda menempatkan pada tombol tautan yang mengatakan "simpan perubahan".

Perhatikan juga bahwa fungsi ini tidak boleh digunakan untuk memvalidasi formulir hanya untuk mengumpulkan data yang akan dikirim ke sisi server untuk validasi. Menggunakan kode yang lemah dan banyak yang ditugaskan seperti itu AKAN menyebabkan XSS , dll.

Saya memiliki masalah yang sama belakangan ini dan keluar dengan plugin .toJSON jQuery ini yang mengubah formulir menjadi objek JSON dengan struktur yang sama. Ini juga berguna secara khusus untuk formulir yang dihasilkan secara dinamis di mana Anda ingin membiarkan pengguna Anda menambahkan lebih banyak bidang di tempat-tempat tertentu.

Intinya adalah Anda mungkin benar-benar ingin membangun formulir sehingga memiliki struktur itu sendiri, jadi katakanlah Anda ingin membuat formulir di mana pengguna memasukkan tempat favoritnya di kota: Anda dapat membayangkan formulir ini untuk mewakili <places>...</places>elemen XML yang mengandung daftar tempat yang disukai pengguna sehingga daftar <place>...</place>elemen yang masing-masing berisi misalnya <name>...</name>elemen, <type>...</type>elemen dan kemudian daftar <activity>...</activity>elemen untuk mewakili aktivitas yang dapat Anda lakukan di tempat seperti itu. Jadi struktur XML Anda akan seperti ini:

<places>

    <place>

        <name>Home</name>
        <type>dwelling</type>

        <activity>sleep</activity>
        <activity>eat</activity>
        <activity>watch TV</activity>

    </place>

    <place>...</place>

    <place>...</place>

</places>

Betapa kerennya memiliki objek JSON dari ini yang akan mewakili struktur yang tepat ini sehingga Anda dapat:

• Simpan objek ini seperti di basis data apa pun yang mirip CouchDB
• Baca dari sisi server $ _POST [] Anda dan coba kembali larik bersarang dengan benar yang kemudian dapat Anda manipulasi secara semantik
• Gunakan beberapa skrip sisi server untuk mengonversinya menjadi file XML yang terbentuk dengan baik (bahkan jika Anda tidak tahu struktur persisnya a-priori)
• Hanya entah bagaimana menggunakannya seperti di skrip server Node.js- seperti apa pun

OK, jadi sekarang kita perlu berpikir bagaimana suatu formulir dapat mewakili file XML.

Tentu saja <form>tag adalah root, tetapi kemudian kita memiliki <place>elemen yang merupakan wadah dan bukan elemen data itu sendiri, jadi kita tidak dapat menggunakan tag input untuk itu.

Di sinilah <fieldset>tag berguna! Kami akan menggunakan <fieldset>tag untuk mewakili semua elemen wadah dalam formulir / representasi XML kami, sehingga mencapai hasil seperti ini:

<form name="places">

    <fieldset name="place">

        <input type="text" name="name"/>
        <select name="type">
            <option value="dwelling">Dwelling</option>
            <option value="restoration">Restoration</option>
            <option value="sport">Sport</option>
            <option value="administrative">Administrative</option>
        </select>

        <input type="text" name="activity"/>
        <input type="text" name="activity"/>
        <input type="text" name="activity"/>

    </fieldset>

</form>

Seperti yang Anda lihat dalam formulir ini, kami melanggar aturan nama unik, tetapi ini OK karena mereka akan dikonversi menjadi array elemen sehingga mereka akan dirujuk hanya dengan indeks mereka di dalam array.

Pada titik ini Anda dapat melihat bagaimana tidak ada name="array[]"nama seperti di dalam formulir dan semuanya cantik, sederhana dan semantik.

Sekarang kami ingin formulir ini dikonversi menjadi objek JSON yang akan terlihat seperti ini:

{'places':{

    'place':[

        {

            'name': 'Home',
            'type': 'dwelling',

            'activity':[

                 'sleep',
                 'eat',
                 'watch TV'

            ]

        },

        {...},

        {...}

    ]

}}

Untuk melakukan ini, saya telah mengembangkan plugin jQuery ini di sini di mana seseorang membantu mengoptimalkan dalam utas Tinjauan Kode ini dan terlihat seperti ini:

$.fn.toJSO = function () {
    var obj = {},
        $kids = $(this).children('[name]');
    if (!$kids.length) {
        return $(this).val();
    }
    $kids.each(function () {
        var $el = $(this),
            name = $el.attr('name');
        if ($el.siblings("[name=" + name + "]").length) {
            if (!/radio|checkbox/i.test($el.attr('type')) || $el.prop('checked')) {
                obj[name] = obj[name] || [];
                obj[name].push($el.toJSO());
            }
        } else {
            obj[name] = $el.toJSO();
        }
    });
    return obj;
};

Saya juga membuat posting blog yang satu ini untuk menjelaskan hal ini lebih lanjut.

Ini mengonversi semuanya dalam bentuk menjadi JSON (bahkan radio dan kotak centang) dan yang harus Anda lakukan hanyalah menelepon

$.post('script.php',('form').toJSO(), ...);

Saya tahu ada banyak cara untuk mengubah bentuk menjadi objek JSON dan tentu saja .serialize()dan .serializeArray()berfungsi dengan baik dalam banyak kasus dan sebagian besar dimaksudkan untuk digunakan, tapi saya pikir seluruh gagasan ini menulis formulir sebagai struktur XML dengan nama yang bermakna dan mengubahnya menjadi objek JSON yang terbentuk dengan baik patut dicoba, juga fakta bahwa Anda dapat menambahkan tag input dengan nama yang sama tanpa khawatir sangat berguna jika Anda perlu retrive data formulir yang dihasilkan secara dinamis.

Saya harap ini membantu seseorang!

Saya mengkodekan bentuk ke objek JavaScript multidimensi sendiri untuk menggunakannya dalam produksi. Hasilnya adalah https://github.com/serbanghita/formToObject.js .

Jawaban lain

document.addEventListener("DOMContentLoaded", function() {
  setInterval(function() {
    var form = document.getElementById('form') || document.querySelector('form[name="userprofile"]');
    var json = Array.from(new FormData(form)).map(function(e,i) {this[e[0]]=e[1]; return this;}.bind({}))[0];
    
    console.log(json)
    document.querySelector('#asJSON').value = JSON.stringify(json);
  }, 1000);
})

<form name="userprofile" id="form">
  <p>Name <input type="text" name="firstname" value="John"/></p>
  <p>Family name <input name="lastname" value="Smith"/></p>
  <p>Work <input name="employment[name]" value="inc, Inc."/></p>
  <p>Works since <input name="employment[since]" value="2017" /></p>
  <p>Photo <input type="file" /></p>
  <p>Send <input type="submit" /></p>
</form>

JSON: <textarea id="asJSON"></textarea>

FormData: https://developer.mozilla.org/en-US/docs/Web/API/FormData

[UPDATE 2020]

Dengan oneliner sederhana di vanilla js:

Object.fromEntries(new FormData(form))

Saya suka versi samuels, tetapi saya percaya ini memiliki kesalahan kecil. Biasanya JSON dikirim sebagai

{"coreSKU": "PCGUYJS", "name_de": "apa pun", ...

BUKAN sebagai

[{"coreSKU": "PCGUYJS"}, {"name_de": "whatever"}, ...

jadi fungsi IMO harus membaca:

App.toJson = function( selector ) {
    var o = {};
    $.map( $( selector ), function( n,i )
    {
        o[n.name] = $(n).val();
    });     
    return o;
}

dan untuk membungkusnya dalam array data (seperti yang diharapkan juga), dan akhirnya mengirimkannya sebagai App.stringify astring ({data: App.toJson ('#cropform: input')})

Untuk tampilan ketat pada Pertanyaan 3593046 untuk versi ramping, di json2.js untuk setiap versi yang tercakup pada setiap acara. Itu harus mencakup semuanya :)

Untuk solusi cepat dan modern, gunakan plugin JSONify jQuery. Contoh di bawah ini diambil kata demi kata dari GitHub README. Semua kredit untuk Kushal Pandya, penulis plugin.

Diberikan:

<form id="myform">
    <label>Name:</label>
    <input type="text" name="name"/>
    <label>Email</label>
    <input type="text" name="email"/>
    <label>Password</label>
    <input type="password" name="password"/>
</form>

Berlari:

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

Menghasilkan:

{"name":"Joe User","email":"[email protected]","password":"mypass"}

Jika Anda ingin melakukan jQuery POST dengan objek JSON ini:

$('#mybutton').click(function() {
    $.post('/api/user', JSON.stringify($('#myform').jsonify()));
}