Question

我有一个包含类似输入元素组的HTML表单。

如何在保留分组的同时序列化表单数据，而无需迭代输入元素？

如果有必要实现目标，我可以更改表单结构。

示例输入：

<form id="form">
  <div>
    <input name="id" value="1" type="hidden">
    <input name="quantity" value="10">
  </div>
  <div>
    <input name="id" value="2" type="hidden">
    <input name="quantity" value="20">
  </div>
  <div>
    <input name="id" value="3" type="hidden">
    <input name="quantity" value="30">
  </div>
</form>

预期输出：

{
  "1": { "id": "1","quantity": "10" },
  "2": { "id": "2","quantity": "20" },
  "3": { "id": "3","quantity": "30" }
}

我试过了：

console.log($('#form').serializeArray());

但表单数据未分组：

[
  {"name":"id","value":"1"},{"name":"quantity","value":"10"},
  {"name":"id","value":"2"},{"name":"quantity","value":"20"},
  {"name":"id","value":"3"},{"name":"quantity","value":"30"}
]

Answer 1

FormData构造函数 - 在传递对表单节点的引用时 - 返回包含所有表单控件及其各自值的迭代器。

complex_expr_path
   : complex_expr_path '::' ident
   | ident '::' ident

expr_path: ident | complex_expr_path

问题是const form = document.querySelector("#form"); const data = new FormData(form); console.log(Array.from(data)); // [["id","1"],["quantity","10"],["id","2"],["quantity","20"],["id","3"],["quantity","30"]]无法对表单控件进行分组。这将需要算法，而算法又需要某种方法来识别给定控件属于哪个组。

这里我给每个表单控件的name属性添加了一个组标识符和冒号。在算法中，我使用冒号分割name属性，使用第一个结果作为组，第二个结果作为键。

FormData

const form = document.querySelector("#form");
const data = new FormData(form);

const grouped = Array.from(data).reduce((m, e) => 
  ((([g, k, v] = [...e[0].split(':'), e[1]]) =>  
    (m[g] = Object.assign({}, m[g]))[k] = v)(), m), {});

console.log(grouped);

Answer 2

var arr = []

$($('form').prop('elements')).each(function(e){
 arr.push({
  "id": e,
  "qty": this.value
 });
});
console.log(arr);

试试这个。

Answer 3

你可以这样做：

(function($){
  $(function(){
    $("#RunCode").click(function(e){
      var FormData = [];
      $("#form input.serialize").each(function(){
        var name = $(this).attr("name");
        name = name.split("[")
        var id = name[1].replace("]", "");
        name = name[0];
        if(typeof FormData[id] == "undefined"){ FormData[id] = {}; }
        FormData[id][name] = $(this).val();
        console.log(name, id, $(this).val(), FormData);
      });
      var str = JSON.stringify(FormData);
      alert(str);
      
      e.preventDefault();
      return false;
    });
  });
})(jQuery);

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<form id="form">
    <div>
    <input class="serialize" type="hidden" name="id[0]" value="1">
    <input class="serialize" name="quantity[0]" min="0" type="text" value="10" />
    </div>
    <div>
    <input class="serialize" type="hidden" name="id[1]" value="2">
    <input class="serialize" name="quantity[1]" min="0" type="text" value="20" />
    </div>
    <div>
    <input class="serialize" type="hidden" name="id[2]" value="3">
    <input class="serialize" name="quantity[2]" min="0" type="text" value="30" />
    </div>
    <input type="button" id="RunCode" value="Run Code" />
</form>

序列化表单数据时保留分组

3 个答案: