webdevqa.jp.net

JQueryを使ってフォームデータをJavaScriptオブジェクトに変換する

フォームのすべての要素をJavaScriptオブジェクトに変換する方法 

各要素をループしなくても、自分のフォームからJavaScriptオブジェクトを自動的に作成する方法がいくつかあります。 $('#formid').serialize();から返されるような文字列は必要ありません。また、$('#formid').serializeArray();から返されるマップも必要としません。

1505
Yisroel

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

上書きされるので実際の入力と同じ名前を持つ隠しフィールドに注意してください。

1590
Tobias Cohen

フォームをJSON LIKE A BOSSに変換する


電流源は GitHub そしてbowerにあります。

$ bower install 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);
427
maček

どうしたの: 

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

Tobias Cohenの解決策の修正版。これは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
101
Daniel X Moore

Array.prototype.reduceはワンライナーで、 Underscore.js などに依存しないので、私は$('#formid').serializeArray() .reduce(function(a, x) { a[x.name] = x.value; return a; }, {}); を使用するのが好きです。

Array.prototype.mapを使用した回答と似ていますが、追加のオブジェクト変数でスコープを乱雑にする必要はありません。ワンストップショッピング。

重要な注意 :重複するname属性を持つ入力を持つフォームは有効なHTMLであり、実際には一般的な方法です。この場合、このスレッドでいずれかの回答を使用することは不適切です(オブジェクトキーは一意である必要があるため)。

53
Ethan Brown

これらすべての答えは私の頭の上にあるように見えた。簡単にするために言うべきことがあります。すべてのフォーム入力にname属性が設定されている限り、これはjim dandyだけで動作します。

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

Underscore.js を使用している場合は、比較的簡潔に使用できます。

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

各要素を調べずにこれを実行する方法は本当にありません。あなたが本当に知りたいことは、「他の誰かがすでにフォームを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;
}
21
tvanfosson

わかりました、私はこれがすでに非常に支持された答えを持っていることを知っています、しかしもう一つの 同様の質問がされました 最近、そして私もこの質問に向けられました。無効なフォーム要素を含めることができます(UIの機能によっては重要な場合があります)。

これが other SO question からの私の答えです。

当初、jQueryのserializeArray()メソッドを使用していましたが、無効になっているフォーム要素は含まれていません。ページ上の他のソースと「同期」されているフォーム要素を無効にすることがよくありますが、それでもシリアル化されたオブジェクトにデータを含める必要があります。だから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です。

17
Samuel Meacham

この関数は、同じ名前の複数の要素と共に多次元配列を処理します。 

私はこれまで数年間それを使ってきました:

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;
};
16
Sergey Varlamov

あなたはこれを行うことができます:

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

_ json _を参照してください。

15
Harini Sekar

すべての与えられた答えでそこにあるいくつかの問題があります...

name[key]のように名前を配列として入力すると、このように生成されます

 name:{
   key : value
 }

例えば ​​: 私がこのような形をしているならば。

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

それからそれはすべての与えられた答えでこのようなオブジェクトを生成します。

Object {
    name : 'value',
    name1[key1] : 'value1',
    name2[key2] : 'value2',
    name3[key3] : 'value3', 
}

しかし、それは以下のように生成する必要があります、誰もがこのようになりたいのです。 

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

それから以下のjsコードを試してください。

(function($){
    $.fn.getForm2obj = function(){
        var _ = {},_t=this;
        this.c = function(k,v){ eval("c = typeof "+k+";"); if(c == 'undefined') _t.b(k,v);}
        this.b = function(k,v,a = 0){ if(a) eval(k+".Push("+v+");"); else eval(k+"="+v+";"); };
        $.map(this.serializeArray(),function(n){
            if(n.name.indexOf('[') > -1 ){
                var keys = n.name.match(/[a-zA-Z0-9_]+|(?=\[\])/g),le = Object.keys(keys).length,tmp = '_';
                $.map(keys,function(key,i){
                    if(key == ''){
                        eval("ale = Object.keys("+tmp+").length;");
                        if(!ale) _t.b(tmp,'[]');
                        if(le == (i+1)) _t.b(tmp,"'"+n['value']+"'",1);
                        else _t.b(tmp += "["+ale+"]",'{}');
                    }else{
                        _t.c(tmp += "['"+key+"']",'{}');
                        if(le == (i+1)) _t.b(tmp,"'"+n['value']+"'");
                    }
                });
            }else _t.b("_['"+n['name']+"']","'"+n['value']+"'");
        });
        return _;
    }
})(jQuery);
console.log($('form').getForm2obj());
<!DOCTYPE html><html><head>
    <script src="https://code.jquery.com/jquery-3.2.1.min.js"></script>
    <title>Convert form data to JavaScript object with jQuery</title>
</head>
<body>
    <form>
        <input name="name" value="value" >
        <input name="name1[key1]" value="value1" >
        <input name="name2[key2]" value="value2" >
        <input name="name3[key3]" value="value3" >
        <input type="checkbox" name="name4[]" value="1" checked="checked">
        <input type="checkbox" name="name4[]" value="2">
        <input type="checkbox" name="name4[]" value="3">
    </form>
</body></html>

14
Bhavik Hirani

つかいます:

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"}
12
Adrian Seeley

ワンライナー(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" }

プログレッシブWebアプリケーションに適しています(通常のフォーム送信アクションとajaxリクエストの両方を簡単にサポートできます)。

11
test30

シンプルさはここで最高です。私は単純な文字列を正規表現で置き換えることを使用しました、そして、彼らはこれまで魅力のように働きました。私は正規表現の専門家ではありませんが、非常に複雑なオブジェクトを追加することさえ可能です。

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

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

いくつか より古い answerから:

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

mačekのソリューション を使用して、ASP.NET MVCが同じフォーム上でネストされた/複雑なオブジェクトを処理する方法で動作するように修正しました。あなたがしなければならないのはこれにvalidate部分を修正することです:

"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" />
6
G-Ram

私がこの問題に対して見つけた最も簡単で最も正確な方法は bbq plugin またはこの one (これは約0.5Kバイトのサイズです)を使うことでした。

多次元配列でも機能します。

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

5
Roey

私はTobias Cohenのコードに問題を見つけました(直接コメントするのに十分なポイントがありません)。同じ名前の2つの選択オプションがあり、両方ともvalue = ""の場合、元のコードは "name":[""、 ""]ではなく "name": ""を生成します

これは、最初のif条件に "|| 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;
};
5
user1134789

JQueryのためにそれをするためのプラグインがあります jquery.serializeJSON 。私は今、いくつかのプロジェクトでうまく使用しました。それは魅力のように働きます。 

4

多次元のJavaScriptオブジェクトにフォームをコーディングして、プロダクションで使用しました。結果は https://github.com/serbanghita/formToObject.js です。

3
Șerban Ghiță

何かを対象にする(単体テストではない)

<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 } }
3
eithed

最近同じ問題が発生し、フォームを同じ構造のJSONオブジェクトに変換する this .toJSON jQuery plugin が出てきました。これは、ユーザーが特定の場所にさらにフィールドを追加できるようにする動的に生成されたフォームにも非常に便利です。

重要なのは、実際にフォームを構築して、それ自体が構造を持つようにすることです。したがって、ユーザーが町でお気に入りの場所を挿入するフォームを作成するとしましょう。このフォームは、<places>...</places>ユーザーが好む場所のリスト。したがって、それぞれが例えば<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 -likeデータベースに保存します
  • それを$ _POST []サーバー側から読み取り、正しくネストされた配列を取得してから、意味的に操作できます
  • サーバー側のスクリプトを使用して、整形式のXMLファイルに変換します(正確な構造が事前にわからない場合でも)
  • Node.js -likeサーバースクリプトの場合と同じように使用します

それでは、フォームが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'

            ]

        },

        {...},

        {...}

    ]

}}

これを行うために、 this jQuery plugin here 誰かが最適化を支援しました thisCode Reviewthread =そして次のようになります:

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

この1つのブログ投稿 を作成して、これをさらに説明しました。

これにより、フォーム内のすべてがJSONに変換され(ラジオやチェックボックスも)、あとは呼び出すだけです

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

フォームをJSONオブジェクトに変換する方法はたくさんあり、ほとんどの場合.serialize().serializeArray()がうまく機能し、主に使用することを意図していることを知っていますが、意味のある名前を持つXML構造としてフォームを記述し、整形式のJSONオブジェクトに変換する試してみる価値があります。また、同じ名前の入力タグを心配は、動的に生成されたフォームデータを取得する必要がある場合に非常に便利です。

これが誰かの助けになることを願っています!

3
Onheiron

選択したソリューションに問題が見つかりました。

配列ベースの名前を持つフォームを使うとき、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;
            }
        });

注意:これはform submit()の外部でも機能するので、コードの残りの部分でエラーが発生した場合、「変更を保存」というリンクボタンをクリックしてもフォームは送信されません。

また、この関数は、検証のためにサーバー側に送信するデータを収集するためだけにフォームを検証するために使用しないでください。このような弱く大量に割り当てられたコードを使用すると、 _ xss _ などが発生します。

3
Sammaye

2つのコレクションを繰り返す必要はありません。必要に応じて "name"と "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でのみテストされています。

3
kflorence

lodash#set を使用する

let serialized = [
  { key: 'data[model][id]', value: 1 },
  { key: 'data[model][name]', value: 'product' },
  { key: 'sid', value: 'dh0un1hr4d' }
];

serialized.reduce(function(res, item) {
  _.set(res, item.key, item.value);
  return res;
}, {});

// returns
{
  "data": {
    "model": {
      "id": 1,
      "name": "product"
    }
  },
  "sid": "dh0un1hr4d"
}
2
Ivan Nosov

私はsamuels版が好きです、しかし、私はそれには少し誤りがあると思います。通常JSONは

{"coreSKU": "PCGUYJS"、 "name_de": "何でも"、...

ではない

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

だから関数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')})として送信します

Stringifyについては、 質問3593046 を参照してください。リーンバージョンは json2.js にあり、最終的にカバーされるバージョンはすべてです。それはそれをすべてカバーするはずです:)

2
Frank Nocke

迅速で最新の解決策を得るには、 JSONify jQueryプラグインを使用してください。以下の例はGitHub READMEから逐語的に引用されています。プラグインの作者Kushal Pandyaの功績によるものです。

与えられた:

<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":"[email protected]","password":"mypass"}

このJSONオブジェクトを使ってjQuery POSTを実行したい場合は、次のようにします。

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

もう一つの答え

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

2
test30

私はXSS攻撃やおそらく他の多くの問題のためにライブサイトでこれを使用しませんが、ここにあなたが何ができるかの簡単な例を示します。

$("#myform").submit(function(){
    var arr = $(this).serializeArray();
    var json = "";
    jQuery.each(arr, function(){
        jQuery.each(this, function(i, val){
            if (i=="name") {
                json += '"' + val + '":';
            } else if (i=="value") {
                json += '"' + val.replace(/"/g, '\\"') + '",';
            }
        });
    });
    json = "{" + json.substring(0, json.length - 1) + "}";
    // do something with json
    return false;
});
1
Jason Berry

JSONでフォームを送信している場合は、文字列を送信するときに[]を削除する必要があります。これはjQuery関数serializeObject()を使って行うことができます。

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

$.fn.serializeObject = function() {
    var o = {};
    //var a = this.serializeArray();
    $(this).find('input[type="hidden"], input[type="text"], input[type="password"], input[type="checkbox"]:checked, input[type="radio"]:checked, select').each(function() {
        if ($(this).attr('type') == 'hidden') { //If checkbox is checked do not take the hidden field
            var $parent = $(this).parent();
            var $chb = $parent.find('input[type="checkbox"][name="' + this.name.replace(/\[/g, '\[').replace(/\]/g, '\]') + '"]');
            if ($chb != null) {
                if ($chb.prop('checked')) return;
            }
        }
        if (this.name === null || this.name === undefined || this.name === '')
            return;
        var elemValue = null;
        if ($(this).is('select'))
            elemValue = $(this).find('option:selected').val();
        else
            elemValue = this.value;
        if (o[this.name] !== undefined) {
            if (!o[this.name].Push) {
                o[this.name] = [o[this.name]];
            }
            o[this.name].Push(elemValue || '');
        }
        else {
            o[this.name] = elemValue || '';
        }
    });
    return o;
}
1
Harini Sekar

フォームをJavaScriptオブジェクトに変換したい場合は、(現時点で)最も簡単な解決策はjQueryのeachおよびserializeArray関数メソッドを使用することです。

$.fn.serializeObject = function() {

  var form = {};
  $.each($(this).serializeArray(), function (i, field) {
    form[field.name] = field.value || "";
  });

  return form;
};

GitHubでホストされているプラ​​グイン:
https://github.com/tfmontague/form-object/blob/master/README.md

Bowerと一緒にインストールできます:
bower install git://github.com/tfmontague/form-object.git

1
tfmontague

それで私は受け入れられた答えを使い、大きな欠陥を見つけました。
次のような入力配列はサポートされていません。 

<input type="checkbox" name="array[]" value="1"/>
<input type="checkbox" name="array[]" value="2"/>
<input type="checkbox" name="array[]" value="3"/>

この小さな変更はそれを修正する必要があります。 

function objectifyForm(inp){
    var rObject = {};
    for (var i = 0; i < inp.length; i++){
        if(inp[i]['name'].substr(inp[i]['name'].length - 2) == "[]"){
            var tmp = inp[i]['name'].substr(0, inp[i]['name'].length-2);
            if(Array.isArray(rObject[tmp])){
                rObject[tmp].Push(inp[i]['value']);
            } else{
                rObject[tmp] = [];
                rObject[tmp].Push(inp[i]['value']);
            }
        } else{
            rObject[inp[i]['name']] = inp[i]['value'];
        }
    }
    return rObject;
}

$(this).serializeArray();からの出力を渡すことを忘れないでください。

1
Folkmann

上記のTobiasの解決策は正しいものですが、コメント投稿者@macekが指摘したように、foo [bar]型の入力を処理し、それらをサブオブジェクトに分割することはしません。

これはPHP専用の機能ですが、JavaScriptで同じ構造を生成できると非常に便利です。

私は上記のTobiasのコードを修正しただけなので、すべての功績は彼にかかっています。これはおそらくもっときれいにすることができますが、私は5分でそれをホイップアップして、それが役に立つかもしれないと思った。

現時点では、多次元配列や数値インデックス配列は処理しません。つまり、foo []ではなくfoo [bar]という名前でのみ機能します。

jQuery.fn.serializeObjectPHP = function()
{
    var o = {};
    var re = /^(.+)\[(.*)\]$/;
    var a = this.serializeArray();
    var n;
    jQuery.each(a, function() {
        var name = this.name;
        if ((n = re.exec(this.name)) && n[2]) {
            if (o[n[1]] === undefined) {
                o[n[1]] = {};
                o[n[1]][n[2]] = this.value || '';
            } else if (o[n[1]][n[2]] === undefined) {
                o[n[1]][n[2]] = this.value || '';
            } else {
                if(!o[n[1]][n[2]].Push) {
                    o[n[1]][n[2]] = [ o[n[1]][n[2]] ];
                }
                o[n[1]][n[2]].Push(this.value || '');
            }
        } else {
            if (n && !n[2]) {
                name = n[1];
            }
            if (o[name] !== undefined) {
                if (!o[name].Push) {
                    o[name] = [o[name]];
                }
                o[name].Push(this.value || '');
            } else {
                o[name] = this.value || '';
            }
        }
    });
    return o;
};
0
Kevin Jhangiani

より現代的な方法は、このようにserializeArray()とreduceを使うことです。

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

それは多くの「正常な」場合に役立ちます。

重複するname属性を持つ複数のタグがある非常に一般的な例では、これでは不十分です。

次の例のように、重複するname属性を持つ入力は通常、いくつかの 'wrapper'(divultr、...)の中にあるので

  <div class="wrapperClass">
    <input type="text" name="one">
    <input type="text" name="two">
  </div>
  <div class="wrapperClass">
    <input type="text" name="one">
    <input type="text" name="two">
  </div>

それらを反復するためにmap演算子と共にreduceを使うことができます:

$(".wrapperClass").map(function () {
  return $(this).find('*').serializeArray()
    .reduce((a, x) => ({ ...a, [x.name]: x.value }), {});
}).get();

結果は次の形式のオブジェクトの配列になります。

  [
    {
      one: valueOfOne,
      two: valueOfTwo
    }, {
      one: valueOfOne,
      two: valueOfTwo
    }
  ]

より明確な結果を与えるjQueryオブジェクトではなく、.get()演算子をmapと組み合わせて基本配列を取得します。 jQueryのドキュメント

0
user3658510

この解決策は優れています。チェックボックスがチェックされていない場合、ここでよく使われるオプションの中には、チェックボックスを正しく処理できないものがあります。

       getData: function(element){
      //@todo may need additional logic for radio buttons
      var select = $(element).find('select');
      var input = $(element).find('input');
      var inputs = $.merge(select,input);
      var data = {};
      //console.log(input,'input');
      $.each(inputs,function(){
        if($(this).attr('type') != undefined){
          switch($(this).attr('type')){
            case 'checkbox':
              data[$(this).attr('name')] = ( ($(this).attr('checked') == 'checked') ? $(this).val():0 );
              break;
            default:
              data[$(this).attr('name')] = $(this).val();
              break;
          }
        }
        else{
          data[$(this).attr('name')] = $(this).val();
        }
      })
      return data;
   }
0
cnizzardini

私のライブラリからの私のコード phery は、本当に複雑なフォームを扱うことができる直列化ルーチンを得ました(デモ https://github.com/pocesar/phery/blob/master/demo.phpのように) #L1664 )、そしてそれは万能型ではありません。実際には各フィールドの型が何であるかを調べます。たとえば、ラジオボックスは範囲と同じではなく、keygenと同じでもなく、select multipleと同じでもありません。私の機能はそれをすべてカバーしています、そしてあなたは https://github.com/pocesar/phery/blob/master/phery.js#L1851 でそれを見ることができます。

serializeForm:function (opt) {
    opt = $.extend({}, opt);

    if (typeof opt['disabled'] === 'undefined' || opt['disabled'] === null) {
        opt['disabled'] = false;
    }
    if (typeof opt['all'] === 'undefined' || opt['all'] === null) {
        opt['all'] = false;
    }
    if (typeof opt['empty'] === 'undefined' || opt['empty'] === null) {
        opt['empty'] = true;
    }

    var
        $form = $(this),
        result = {},
        formValues =
            $form
                .find('input,textarea,select,keygen')
                .filter(function () {
                    var ret = true;
                    if (!opt['disabled']) {
                        ret = !this.disabled;
                    }
                    return ret && $.trim(this.name);
                })
                .map(function () {
                    var
                        $this = $(this),
                        radios,
                        options,
                        value = null;

                    if ($this.is('[type="radio"]') || $this.is('[type="checkbox"]')) {
                        if ($this.is('[type="radio"]')) {
                            radios = $form.find('[type="radio"][name="' + this.name + '"]');
                            if (radios.filter('[checked]').size()) {
                                value = radios.filter('[checked]').val();
                            }
                        } else if ($this.prop('checked')) {
                            value = $this.is('[value]') ? $this.val() : 1;
                        }
                    } else if ($this.is('select')) {
                        options = $this.find('option').filter(':selected');
                        if ($this.prop('multiple')) {
                            value = options.map(function () {
                                return this.value || this.innerHTML;
                            }).get();
                        } else {
                            value = options.val();
                        }
                    } else {
                        value = $this.val();
                    }

                    return {
                        'name':this.name || null,
                        'value':value
                    };
                }).get();

    if (formValues) {
        var
            i,
            value,
            name,
            $matches,
            len,
            offset,
            j,
            fields;

        for (i = 0; i < formValues.length; i++) {
            name = formValues[i].name;
            value = formValues[i].value;

            if (!opt['all']) {
                if (value === null) {
                    continue;
                }
            } else {
                if (value === null) {
                    value = '';
                }
            }

            if (value === '' && !opt['empty']) {
                continue;
            }

            if (!name) {
                continue;
            }

            $matches = name.split(/\[/);

            len = $matches.length;

            for (j = 1; j < len; j++) {
                $matches[j] = $matches[j].replace(/\]/g, '');
            }

            fields = [];

            for (j = 0; j < len; j++) {
                if ($matches[j] || j < len - 1) {
                    fields.Push($matches[j].replace("'", ''));
                }
            }

            if ($matches[len - 1] === '') {
                offset = assign_object(result, fields, [], true, false, false);

                if (value.constructor === Array) {
                    offset[0][offset[1]].concat(value);
                } else {
                    offset[0][offset[1]].Push(value);
                }
            } else {
                assign_object(result, fields, value);
            }
        }
    }

    return result;
}

それは私のライブラリの一部です phery 、しかしそれはあなた自身のプロジェクトに移植することができます。配列があるべき場所に配列を作成し、select、normalizeチェックボックスオプションなどから正しい選択オプションを取得します。それをJSON(実際のJSON文字列)に変換したい場合は、JSON.stringify($('form').serializeForm());を実行してください。

0
pocesar
const formData = new FormData(form);

let formDataJSON = {};

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

    formDataJSON[key] = value;
}
0
Stonetip

これはTobias Cohenの関数の改良であり、多次元配列でうまく機能します。

http://jsfiddle.net/BNnwF/2/ /

ただし、これはjQueryプラグインではありませんが、そのように使用したい場合は、1つにするのに数秒かかるだけです。単に関数宣言ラッパーを置き換えるだけです。

function serializeFormObject(form)
{
    ...
}

と:

$.fn.serializeFormObject = function()
{
    var form = this;
    ...
};

私はそれが同じことをするという点でmacekの解決策に似ていると思いますが、私はこれが少しきれいでより単純であると思います。また、macekのテストケースの入力をフィドルに含め、いくつか追加しました。これまでのところ、これは私のためにうまくいきます。

function serializeFormObject(form)
{
    function trim(str)
    {
        return str.replace(/^\s+|\s+$/g,"");
    }

    var o = {};
    var a = $(form).serializeArray();
    $.each(a, function() {
        var nameParts = this.name.split('[');
        if (nameParts.length == 1) {
            // New value is not an array - so we simply add the new
            // value to the result object
            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 || '';
            }
        }
        else {
            // New value is an array - we need to merge it into the
            // existing result object
            $.each(nameParts, function (index) {
                nameParts[index] = this.replace(/\]$/, '');
            });

            // This $.each merges the new value in, part by part
            var arrItem = this;
            var temp = o;
            $.each(nameParts, function (index) {
                var next;
                var nextNamePart;
                if (index >= nameParts.length - 1)
                    next = arrItem.value || '';
                else {
                    nextNamePart = nameParts[index + 1];
                    if (trim(this) != '' && temp[this] !== undefined)
                        next = temp[this];
                    else {
                        if (trim(nextNamePart) == '')
                            next = [];
                        else
                            next = {};
                    }
                }

                if (trim(this) == '') {
                    temp.Push(next);
                } else
                    temp[this] = next;

                temp = next;
            });
        }
    });
    return o;
}
0
Kipras

私は最近同じ問題を抱えていたので、フォームのコントロールを解析してコントロールのID /値を取得し、それをJSONに変換できるようにする関数を開発しました。

コントロールを追加するのに十分な柔軟性があります。値として解釈するコントロールの種類と属性を指定するだけです。

完全なスクリプトはこちら にあります。

利点は、オブジェクト全体をドラッグせずに、実際に必要なデータだけが取得されることです。

不利な点は、ネストしたオプションがある場合は、それに応じてIDを前に付ける必要があるので、その特定のグループに重複したオプションを使用できることです。

これが役に立つことを願っています!

0
Florin Mircea

これはjQuery以外の方法です。

    var getFormData = function(form) {
        //Ignore the submit button
        var elements = Array.prototype.filter.call(form.elements, function(element) {
            var type = element.getAttribute('type');
            return !type || type.toLowerCase() !== 'submit';
        });

あなたはこのようにそれを使うことができます:

function() {

    var getFormData = function(form) {
        //Ignore the submit button
        var elements = Array.prototype.filter.call(form.elements, function(element) {
            var type = element.getAttribute('type');
            return !type || type.toLowerCase() !== 'submit';
        });

        //Make an object out of the form data: {name: value}
        var data = elements.reduce(function(data, element) {
            data[element.name] = element.value;
            return data;
        }, {});

        return data;
    };

    var post = function(action, data, callback) {
        var request = new XMLHttpRequest();
        request.onload = callback;
        request.open('post', action);
        request.setRequestHeader("Content-Type", "application/json;charset=UTF-8");
        request.send(JSON.stringify(data), true);
        request.send();
    };

    var submit = function(e) {
        e.preventDefault();
        var form = e.target;
        var action = form.action;
        var data = getFormData(form);
        //change the third argument in order to do something
        //more intersting with the response than just print it
        post(action, data, console.log.bind(console));
    }

    //change formName below
    document.formName.onsubmit = submit;

})();
0
Max Heiber

Serialize関数はJSONオブジェクトをパラメータとして受け取り、serialize Stringを返します。

function serialize(object) {
            var _SPECIAL_CHARS = /[\\\"\x00-\x1f\x7f-\x9f\u00ad\u0600-\u0604\u070f\u17b4\u17b5\u200c-\u200f\u2028-\u202f\u2060-\u206f\ufeff\ufff0-\uffff]/g, _CHARS = {
                '\b' : '\\b',
                '\t' : '\\t',
                '\n' : '\\n',
                '\f' : '\\f',
                '\r' : '\\r',
                '"' : '\\"',
                '\\' : '\\\\'
            }, EMPTY = '', OPEN_O = '{', CLOSE_O = '}', OPEN_A = '[', CLOSE_A = ']', COMMA = ',', COMMA_CR = ",\n", CR = "\n", COLON = ':', space = "", COLON_SP = ': ', stack = [], QUOTE = '"';
            function _char(c) {
                if (!_CHARS[c]) {
                    _CHARS[c] = '\\u' + ('0000' + (+(c.charCodeAt(0))).toString(16))
                        .slice(-4);
                }
                return _CHARS[c];
            }
            function _string(s) {
                return QUOTE + s.replace(_SPECIAL_CHARS, _char) + QUOTE;
                // return str.replace('\"','').replace('\"','');
            }

            function serialize(h, key) {
                var value = h[key], a = [], colon = ":", arr, i, keys, t, k, v;
                arr = value instanceof Array;
                stack.Push(value);
                keys = value;
                i = 0;
                t = typeof value;
                switch (t) {
                    case "object" :
                        if(value==null){
                            return null;
                        }
                        break;
                    case "string" :
                        return _string(value);
                    case "number" :
                        return isFinite(value) ? value + EMPTY : NULL;
                    case "boolean" :
                        return value + EMPTY;
                    case "null" :
                        return null;
                    default :
                        return undefined;
                }
                arr = value.length === undefined ? false : true;

                if (arr) { // Array
                    for (i = value.length - 1; i >= 0; --i) {
                        a[i] = serialize(value, i) || NULL;
                    }
                }
                else { // Object
                    i = 0;
                    for (k in keys) {
                        if (keys.hasOwnProperty(k)) {
                            v = serialize(value, k);
                            if (v) {
                                a[i++] = _string(k) + colon + v;
                            }
                        }
                    }
                }

                stack.pop();
                if (space && a.length) {

                    return arr
                        ? "[" + _indent(a.join(COMMA_CR), space) + "\n]"
                        : "{\n" + _indent(a.join(COMMA_CR), space) + "\n}";
                }
                else {
                    return arr ? "[" + a.join(COMMA) + "]" : "{" + a.join(COMMA)
                        + "}";
                }
            }
            return serialize({
                "" : object
            }, "");
        }
0
Anoop

私はフォームライブラリを恥知らずな自己宣伝する必要がありました。

transForm.js

それは次のようなことをします:シリアライズ、デシリアライズ、クリア、フォームの送信。

私がこれを作った理由はform2js/js2formが維持されず、私が望むほど柔軟で速くないということです。これはform2js/js2formと互換性があるので本番で使用します。

0
A1rPun

私はjQueryモジュール jsForm を書きました。これは非常に複雑なフォームでもこの双方向を実現できます(コレクションや他のより複雑な構造も可能です)。

これはフィールドの名前(およびコレクション用のいくつかの特別なクラス)を使用し、JSONオブジェクトと一致します。コレクションとデータ処理のためにDOM要素の自動複製を可能にします。

<html>
    <head>
        <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
        <script src="https://raw.github.com/corinis/jsForm/master/src/jquery.jsForm.js"></script>
        <script>
        $(function(){
            // Some JSON data
            var jsonData = {
                name: "TestName",   // Standard inputs
                description: "long Description\nMultiline", // Textarea
                links: [{href:'http://stackoverflow.com',description:'StackOverflow'}, {href:'http://www.github.com', description:'GitHub'}],   // Lists
                active: true,   // Checkbox
                state: "VISIBLE"    // Selects (enums)
            };

            // Initialize the form, prefix is optional and defaults to data
            $("#details").jsForm({
                data:jsonData
            });

            $("#show").click(function() {
                // Show the JSON data
                alert(JSON.stringify($("#details").jsForm("get"), null, " "));
            });
        });
        </script>
    </head>
    <body>
        <h1>Simpel Form Test</h1>
        <div id="details">
            Name: <input name="data.name"/><br/>
            <input type="checkbox" name="data.active"/> active<br/>
            <textarea name="data.description"></textarea><br/>
            <select name="data.state">
                <option value="VISIBLE">visible</option>
                <option value="IMPORTANT">important</option>
                <option value="HIDDEN">hidden</option>
            </select>
            <fieldset>
                <legend>Links</legend>
                <ul class="collection" data-field="data.links">
                    <li><span class="field">links.description</span> Link: <input name="links.href"/> <button class="delete">x</button></li>
                </ul>
            </fieldset>
            <button class="add" data-field="data.links">add a link</button><br/>
            Additional field: <input name="data.addedField"/>
        </div>
        <button id="show">Show Object</button>
    </body>
</html>
0
Niko