Question

（背景）我正在构建一个简单的表单构建器，用户可以在其中创建调查/问卷。一旦用户完成设计将用于创建实际表单的表单，我就创建了一个json输出。由于正在设计/构建表单的表单构建器用户可以添加复选框或无线电字段或选择框选项，并且可以编辑其值和标签。 HTML：

<form class="test-form droppedField checkbox">
<input type="text" name="title" placeholder="Title" class="ctrl-textbox editable"></input>
<input type="text" name="subtitle" placeholder="Sub Title" class="ctrl-textbox editable"></input>
<input type="text" name="name" placeholder="Name/Keyword" class="ctrl-textbox editable">
<input type="hidden" name="type" value="checkbox">
<ul>
    <li>
        <div class="ctrl-checkboxgroup children" name="children">
            <input type="checkbox">
            <input name="label" type="text" value="" placeholder="Option Label.." class="input-small editable">
            <input type="text" value="" name="value" placeholder="Option Value.." class="input-small editable opt-value">
        </div>
        <div class="ctrl-checkboxgroup children" name="children">
            <input type="checkbox">
            <input name="label" type="text" value="" placeholder="Option Label.." class="input-small editable">
            <input type="text" value="" name="value" placeholder="Option Value.." class="input-small editable opt-value">
        </div>
    </li>
</ul>....

我被困在生成json的地方。我希望能够将复选框选项/收音机/选择框选项组合在一起作为“儿童”，以获得更清晰的操作。示例json（我认为会有所帮助）：

[
    {
        "title": "Gender",
        "subtitle": "This is a required question.",
        "name": "gender",
        "children": [
            {
                "label": "Male",
                "value": "male"
            },
            {
                "label": "Female",
                "value": "female"
            },
            {
                "label": "Non traditional",
                "value": "nontraditional"
            }
        ]
    }
]

现在正在做什么：

[
    {
        "title": "Gender",
        "subtitle": "This is a required question.",
        "name": "gender",
        "label":["Male", "Female", "Non traditional"],
        "value":["male", "female", "nontraditional"]
    } 
]

我在做什么：

$('.test-form').each(function () {
   output.push(JSON.stringify($(this).serializeObject()));
});

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

当我将孩子们推到一个迭代它们的数组时：

obj = [];
$('.children').each(function (i,v) {
    obj.push(obj[v.name] = v.value);
});
console.log(obj);

我明白了：

["Male", "male", "Female", "female", "Non traditional", "nontraditional", label: "Non traditional", value: "nontraditional"]

如果我应该重新构建我的HTML或者我可以改变JSON输出，我很困惑。任何形式的帮助表示赞赏。提前谢谢。

Answer 1

您可以修改serializeObject()函数以创建所需的JSON，如果您可以将元素的“name”属性更改为：

<li>
    <div class="ctrl-checkboxgroup children" name="children">
        <input type="checkbox">
        <input name="children[0].label" type="text" value="" placeholder="Option Label.." class="input-small editable">
        <input name="children[0].value" type="text" value="" placeholder="Option Value.." class="input-small editable opt-value">
    </div>
    <div class="ctrl-checkboxgroup children" name="children">
        <input type="checkbox">
        <input name="children[1].label" type="text" value="" placeholder="Option Label.." class="input-small editable">
        <input name="children[1].value" type="text" value="" placeholder="Option Value.." class="input-small editable opt-value">
    </div>
</li>

当然serializeObject()函数的逻辑会更复杂，因为它必须将名称拆分为“。”并检查方括号。但是有可能。

<强>更新

这是jsfiddle，显示了serializeObject()的样子。它支持以下所有输入名称：

XXX
xxx.yyy
XXX [0]
XXX [0] .yyy
XXX [0] .yyy [0]
XXX [0] [0]
XXX [0] [0] .yyy
XXX [0] [0] .yyy [0]

在表单提交上格式化JSON

1 个答案: