0

I am using a fairly standard JSON.stringify function, that gets passed across to a jQuery function that serializes this object.

However I'd like to make an modification to allow an array of inputs to be posted. Much like how the current solution handles a collection of checkboxes.

E.g.

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

These are all items of clothing so I'd like to form them into something like:

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

In the above, the function needs to support an additional level of grouping. My first thoughts on this are to add a name to the fieldset. This seems logical to me. However as per HTML spec's the fieldset element isn't part of the form submission, so there would be some that would say adding a NAME to this element for this purpose, violates the specification. However, as the specification supports adding a 'name' attribute, I think this is perfectly valid.

In the context of the entire form, I'm looking for something that supports:

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

Giving...

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

I've posted a simplified version of my current code on JSFiddle - http://jsfiddle.net/DR3EA/1/

4

3 回答 3

1

我遇到了类似的问题，最终选择了serializeObject jQuery 插件。不要使用字段集，而是name像这样格式化您的属性：

<input type="text" name="work.street" value="320 3rd St">
<input type="text" name="work.city" value="San Fran">
<input type="text" name="work.state" value="CA">

给定上述输入，$('input').serializeObject()返回一个嵌套良好的 JS 对象：

{ work: { street: "320 3rd St", city: "San Fran", state: "CA" } }
于 2014-01-20T10:54:42.080 回答
1

我有这个http://jsfiddle.net/DR3EA/2/，但它无法将标签数据转换为结果，因为我使用 fieldset 进行序列化。

$.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插件可能会有所帮助，但您需要指定一些属性（例如数据名称），以便像每个字段集（或容器元素）的键一样工作。

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