0

私はかなり標準的なJSON.stringify関数を使用しています。この関数は、このオブジェクトをシリアル化するjQuery関数に渡されます。

ただし、入力の配列を投稿できるように変更を加えたいと思います。現在のソリューションがチェックボックスのコレクションを処理する方法とよく似ています。

例えば

<fieldset name="clothes">
  <input type="number" name="coat" />
  <input type="number" name="jacket" />
  <input type="number" name="jeans" />
  <input type="number" name="(guid)" />
</fieldset>

これらはすべて衣料品なので、次のようなものにしたいと思います。

{ "Clothes": { "coat" : 2 , "jacket" : 10 , "jeans" : 1 } }

上記では、関数は追加レベルのグループ化をサポートする必要があります。これについての私の最初の考えは、フィールドセットに名前を追加することです。これは私には論理的に思えます。ただし、HTML仕様によると、fieldset要素はフォーム送信の一部ではないため、この目的でこの要素にNAMEを追加すると、仕様に違反すると言う人もいます。ただし、仕様では「name」属性の追加がサポートされているため、これは完全に有効だと思います。

フォーム全体のコンテキストで、私は以下をサポートするものを探しています。

<fieldset>
  <input type="text" name="Name" />
  <input type="text" name="Email" />
</fieldset>
<fieldset name="clothes">
  <input type="number" name="coat" />
  <input type="number" name="jacket" />
  <input type="number" name="jeans" />
  <input type="number" name="(guid)" />
</fieldset>

与える...

{ "Name" : "John" , Email : "x@y.com" , "Clothes": { "coat" : 2 , "jacket" : 10 , "jeans" : 1 } }

現在のコードの簡略版をJSFiddleに投稿しました-http ://jsfiddle.net/DR3EA/1/

4

3 に答える 3

1

私はこれhttp://jsfiddle.net/DR3EA/2/を持っていますが、フィールドセットを使用してシリアライズを行うため、ラベルデータを結果に取得できません。

$.fn.serializeField = function() {
    var result = {};

    this.each(function() {

        $(this).find("fieldset").each( function() {
            var $this = $(this);
            var name = $this.attr("name");

            if (name) {
               result[name] = {};
               $.each($this.serializeArray(), function() {
                   result[name][this.name] = this.value;
               }); 
            }
            else {
               $.each($this.serializeArray(), function() {
                   result[this.name] = this.value;
               });
            }
         });

    });

    return result;
};

だろresultう

{"Name":"bb","Email":"cc","clothes":{"coat":"-1","jacket":"-2","jeans":"-2"}}
于 2012-09-19T15:57:36.750 に答える
0

jquery-serializeFieldsプラグインが役立つ場合がありますが、各フィールドセット (またはコンテナー要素) のキーのように機能するように、いくつかの属性 (data-name など) を指定する必要があります。

HTML:

<form>
<fieldset data-name="clothes">
  <input type="number" name="coat" value="1" />
  <input type="number" name="jacket" value="2"/>
  <input type="number" name="jeans" value="3"/>
  <input type="number" name="(guid)" value="4"/>
</fieldset>
</form>

<div id="result"></div>

JavaScript:

var result = $("form").serializeFields();

$("#result").html(JSON.stringify(result));

結果：

{"clothes":{"coat":"1","jacket":"2","jeans":"3","(guid)":"4"}}

ここでテストしました：http://jsfiddle.net/zfj4Lprb/

于 2015-05-11T15:46:17.627 に答える