Як конвертувати всі елементи форми в об’єкт JavaScript?

Я хотів би мати якийсь спосіб автоматичного побудови об’єкта JavaScript з моєї форми, не потребуючи перекидання на кожен елемент. Я не хочу рядок, як повернуто $('#formid').serialize();, ні я не хочу повертати карту$('#formid').serializeArray();

serializeArrayвже робить саме це. Вам потрібно просто помасажувати дані у потрібному форматі:

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

Слідкуйте за прихованими полями, які мають те саме ім'я, що і справжні введення, оскільки вони будуть перезаписані.

Перетворюйте форми в JSON як бос

Джерело струму знаходиться на GitHub та Bower .

$ bower встановити jquery-serialize-object

Наступний код застарілий .

Наступний код може працювати з усіма видами вхідних імен; і поводитися з ними так, як ви очікували.

Наприклад:

<!-- 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"
          }
        }
      }
    }
  }
}

Використання

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

Магія (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);

Що не так з:

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

Фіксована версія рішення Тобіаса Коена. Цей правильно обробляє помилкові значення типу 0і ''.

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

І версія CoffeeScript для зручності кодування:

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

Мені подобається використовувати, Array.prototype.reduceтому що це однолінійний, і він не покладається на Underscore.js або подібне:

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

Це схоже на відповідь, використовуючи Array.prototype.map, але вам не потрібно захаращувати сферу застосування додатковою змінною об'єкта. Покупки на одній зупинці.

ВАЖЛИВО ПРИМІТКА : Форми з вхідними даними, які мають повторювані nameатрибути, є дійсним HTML, і це фактично загальний підхід. Використання будь-якого з відповідей у ​​цьому потоці буде недоцільним у такому випадку (оскільки об’єктні ключі повинні бути унікальними).

Усі ці відповіді мені здавались такими зверху. Щось сказати для простоти. До тих пір, поки всі ваші форми форми мають набір атрибутів імені, це має працювати просто джим денді.

$('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?)
});

Дійсно зробити це неможливо без вивчення кожного з елементів. Що ви насправді хочете знати, це "чи хтось уже написав метод, який перетворює форму в об'єкт JSON?" Щось подібне повинно працювати - зауважте, що воно надасть лише елементи форми, які будуть повернуті через POST (повинні мати ім’я). Це не перевірено .

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

Якщо ви використовуєте Underscore.js, ви можете використовувати відносно стислі:

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

Я перевірив, що існує проблема з усіма іншими відповідями, що якщо ім'я вводу є як масив, наприклад name[key], то воно повинно генеруватися так:

name:{ key : value }

Наприклад: Якщо у вас є форма HTML, схожа на форму нижче:

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

Але він повинен бути згенерований так само, як JSON, наведений нижче, і не стає об'єктом на зразок наступного з усіма іншими відповідями. Тож якщо хтось хоче принести щось на зразок наступного JSON, спробуйте код JS нижче.

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

Гаразд, я знаю, що на це вже є висококваліфікована відповідь, але нещодавно було задано ще одне подібне питання , і я був також спрямований на це питання. Я також хотів би запропонувати своє рішення, оскільки він пропонує перевагу перед прийнятим рішенням: Ви можете включити відключені елементи форми (що іноді важливо, залежно від того, як функціонує інтерфейс користувача)

Ось моя відповідь на інше питання ТА :

Спочатку ми використовували serializeArray()метод jQuery , але це не включає елементи форми, які відключені. Ми часто відключаємо елементи форми, які "синхронізуються" з іншими джерелами на сторінці, але нам все одно потрібно включати дані в наш серіалізований об'єкт. Так serializeArray()виходить. Ми використовували :inputселектор для отримання всіх вхідних елементів (як увімкнених, так і відключених) у заданому контейнері, а потім $.map()для створення нашого об'єкта.

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

Зауважте, що для цього кожен ваш вхід знадобиться nameатрибутом, який буде іменем властивості отриманого об'єкта.

Це насправді трохи змінено з того, що ми використовували. Нам потрібно було створити об’єкт, який був структурований як .NET IDictionary, тому ми використали це: (Я надаю його тут на випадок, якщо це корисно)

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

Мені подобаються обидва ці рішення, тому що вони є простими способами використання $.map()функції, і ви маєте повний контроль над вашим селектором (так, які елементи ви в кінцевому підсумку включаєте в отриманий об'єкт). Крім того, не потрібен додатковий плагін. Простий старий jQuery.

Ця функція повинна обробляти багатовимірні масиви разом з декількома елементами з однаковою назвою.

Я використовую його вже пару років:

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

Ви можете зробити це:

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

Див. JSON .

Однолінійний (без залежностей, окрім jQuery), використовує фіксовану прив'язку об'єкта для переданої функції mapметоду.

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

Що це робить?

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

підходить для прогресивних веб-додатків (можна легко підтримати як звичайну дію надіслати форму, так і запити ajax)

Використання:

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

Вихід:

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

Простота тут найкраща. Я використовував просту заміну рядка звичайним виразом, і вони досі працювали як шарм. Я не звичайний експерт з виразів, але, маю надію, ви навіть можете заповнити дуже складні об'єкти.

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

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

Зі старої відповіді:

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

Я знайшов проблему з кодом Тобіаса Коена (у мене недостатньо балів, щоб коментувати його безпосередньо), який інакше працює для мене. Якщо у вас є два варіанти вибору з тим самим іменем, обидва зі значенням = "", вихідний код видасть "name": "" замість "name": ["", ""]

Я думаю, що це можна виправити, додавши "|| o [this.name] == ''" до першого, якщо умова:

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

Використовуючи рішення maček , я змінив його для роботи з тим, як ASP.NET MVC обробляє їх вкладені / складні об'єкти в одній формі. Все, що вам потрібно зробити, - це змінити валідаційний фрагмент на це:

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

Це буде відповідати і потім правильно відображати елементи з іменами типу:

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

І

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

найпростіший і точний спосіб я знайшов для цієї проблеми полягає у використанні барбекю плагін або це один (що становить близько 0.5K байт розміру).

він також працює з багатовимірними масивами.

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

Існує плагін, щоб зробити саме це для jQuery, jquery.serializeJSON . Зараз я успішно використовую її в кількох проектах. Це працює як шарм.

const formData = new FormData(form);

let formDataJSON = {};

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

    formDataJSON[key] = value;
}

Я віддаю перевагу такому підходу, оскільки: вам не потрібно повторювати дві колекції, ви можете отримати інші речі, крім "ім'я" та "значення", якщо вам потрібно, і ви можете санітувати свої цінності, перш ніж зберігати їх в об'єкті ( якщо у вас є значення за замовчуванням, які ви не бажаєте зберігати, наприклад).

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

Використовуйте так:

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

Тестується лише у Firefox.

Перетворіть що-небудь в об’єкт (не перевірений одиницею)

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

Вихід тесту:

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

на

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

дасть:

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

Я знайшов проблему з обраним рішенням.

При використанні форм, що мають імена на основі масиву, функція jQuery serializeArray () фактично гине.

У мене є структура PHP, яка використовує назви полів на основі масиву, щоб дозволяти одній і тій же формі розміщуватись на одній сторінці кілька разів у кількох переглядах. Це може бути зручно для розміщення, додавання, редагування та видалення на одній сторінці без суперечливих моделей форм.

Оскільки я хотів сералізувати форми, не виймаючи цю абсолютну базову функціональність, я вирішив написати власний seralizeArray ():

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

Зверніть увагу: це також працює поза формою submit (), тому якщо в іншому коді сталася помилка, форма не надсилатиметься, якщо ви розмістите на кнопці посилання, що говорить "зберегти зміни".

Також зауважте, що цю функцію ніколи не слід використовувати для перевірки форми лише для збору даних, що надсилаються на сервер для перевірки. Використання такого слабкого та масово присвоєного коду спричинить XSS тощо.

У мене була така ж проблема останнім часом, і я вийшов з цим плагіном .toJSON jQuery, який перетворює форму в об'єкт JSON з тією ж структурою. Це також корисно для динамічно генерованих форм, де ви хочете дозволити вашому користувачу додавати більше полів у певних місцях.

Справа в тому, що ви, можливо, хочете створити форму так, щоб вона сама мала структуру, тому скажімо, ви хочете створити форму, куди користувач вставляє свої улюблені місця у місті: ви можете уявити, що ця форма представляє <places>...</places>XML-елемент, що містить список місць, яким користувач подобається, таким чином, перелік <place>...</place>елементів, кожен з яких містить, наприклад, <name>...</name>елемент, <type>...</type>елемент, а потім список<activity>...</activity> елементів, які представляють дії, які ви можете виконувати в такому місці. Отже, ваша XML структура буде такою:

<places>

    <place>

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

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

    </place>

    <place>...</place>

    <place>...</place>

</places>

Як здорово було б мати об'єкт JSON з цього, який би представляв цю точну структуру, тож ви зможете:

• Зберігайте цей об’єкт таким, який він є у будь-якій базі даних CouchDB
• Прочитайте його зі свого сервера $ _POST [] та відновіть правильно вкладений масив, який ви зможете семантично маніпулювати.
• Використовуйте якийсь сценарій на стороні сервера, щоб перетворити його у добре сформований XML-файл (навіть якщо ви не знаєте його точної структури a-priori)
• Просто якимось чином використовуйте його таким, яким він є у будь-якому сценарії сервера, подібного до Node.js

Гаразд, тепер нам потрібно подумати, як форма може представляти XML-файл.

Звичайно, <form>тег - це root, але тоді ми маємо це<place> елемент, який є контейнером, а не самим елементом даних, тому ми не можемо використовувати для нього тег введення.

Ось де <fieldset>тег стане у нагоді! Ми будемо використовувати <fieldset>теги для представлення всіх елементів контейнера в нашій формі / представлення XML і таким чином, щоб отримати такий результат:

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

Як ви бачите в цій формі, ми порушуємо правило унікальних імен, але це нормально, оскільки вони будуть перетворені в масив елемента, таким чином вони будуть посилатися лише на їх індекс всередині масиву.

У цей момент ви бачите, як name="array[]"всередині форми немає подібного імені, і все досить, просто і семантично.

Тепер ми хочемо, щоб ця форма була перетворена в об'єкт JSON, який буде виглядати приблизно так:

{'places':{

    'place':[

        {

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

            'activity':[

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

            ]

        },

        {...},

        {...}

    ]

}}

Для цього я розробив цей плагін jQuery тут, який хтось допоміг оптимізувати у цій темі перегляду коду і виглядає так:

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

Я також зробив це одне повідомлення в блозі, щоб пояснити це більше.

Це перетворює все у формі в JSON (навіть радіо та прапорці), і вам залишиться лише зателефонувати

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

Я знаю , що є багато способів перетворення форм в об'єктах JSON і впевнений , .serialize()і .serializeArray()роботу найбільшого в більшості випадків і в основному призначені для використання, але я думаю , що вся цю ідею написання форми як структури XML з осмисленими іменами і перетвореннями його в добре сформований об’єкт JSON варто спробувати, також те, що ви можете додавати одноіменні вхідні теги, не хвилюючись, дуже корисно, якщо вам потрібно відновити дані, що динамічно створюються форми.

Я сподіваюся, що це комусь допоможе!

Я зашифрував форму для багатовимірного об’єкта JavaScript, щоб використовувати його у виробництві. Результат - https://github.com/serbanghita/formToObject.js .

Ще одна відповідь

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

[ОНОВЛЕННЯ 2020]

За допомогою простого лінійки ванілі js:

Object.fromEntries(new FormData(form))

Мені подобається версія Samuels, але я вважаю, що вона має невелику помилку. Зазвичай JSON надсилається як

{"coreSKU": "PCGUYJS", "name_de": "що завгодно", ...

НЕ як

[{"coreSKU": "PCGUYJS"}, {"name_de": "що завгодно"}, ...

тому функція IMO повинна читати:

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

і обернути його в масив даних (як зазвичай очікується) і, нарешті, надіслати його як astring App.stringify ({data: App.toJson ('#cropform: input')})

Щоб детальніше подивитись на питання 3593046 для худорлявої версії, на json2.js для версії, що охоплюється всіма подіями . Це все повинно охоплювати :)

Для швидкого, сучасного рішення використовуйте плагін JSONify jQuery. Приклад нижче взято дослівно від GitHub README. Вся заслуга Кушаля Панді, автора плагіна.

Подано:

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

Запуск:

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

Виробляє:

{"name":"Joe User","email":"joe@example.com","password":"mypass"}

Якщо ви хочете зробити jQuery POST з цим об'єктом JSON:

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