获取条件json格式的表单数据

Get form data in conditional json format

本文关键字：表单 数据 格式 条件 json 获取      更新时间：2023-09-26

我有一个html表单，比如：

<form action="" id="my-form">
  <input type="text" name="id" value="1"/>
  <input type="text" name="custom" value="a"/>
  <input type="text" name="custom" value="b"/>
  <input type="text" name="custom" value="c">
</form>

当我获得json格式的表单数据时，它显示为：

{id: 1, custom: c}  //get the last value only

我需要这样的数据方式：

  • 如果name="custom"在我的表单中只存在一次，json将是

    {id: 1, custom: c} // it is working now

  • 如果name="custom"在我的表单中多次存在，json将是

    {
id: 1,
multiple:[
   {custom: a},
   {custom: b},
   ...
  ]
}

    或

    {id: 1, custom:[a, b, c]}

我获取json数据的方法是：

function getFormData($form){ 
  var unindexed_array = $form.serializeArray();
  var indexed_array = {};
  $.map(unindexed_array, function(n, i){
    indexed_array[n['name']] = n['value']; 
  });
  return indexed_array;
}
var $form = $("#my-form");
var data = getFormData($form);

如何解决这个问题？提前感谢。

这里有一些解决方案

    <!DOCTYPE html>
    <html>
    <body>
    <form action="" id="my-form">
        <input type="text" name="id" value="1"/>
        <input type="text" name="custom" value="a"/>
        <input type="text" name="custom" value="b"/>
        <input type="text" name="custom" value="c">
    </form>
    <script>
        var objData = {};
        var tmpArray = [];
        var allInputs = document.getElementById("my-form").elements;
        for (var i = 0, len = allInputs.length; i < len; i++) {
            var existInArray = false;
            for (var j = 0, lenArr = tmpArray.length; j < lenArr; j++) {
                if (tmpArray[j] == allInputs[i].getAttribute('name')) {
                    existInArray = true;
                }
            }
            if (!existInArray) {
                tmpArray.push(allInputs[i].getAttribute('name'));
                objData[allInputs[i].getAttribute('name')] = allInputs[i].getAttribute('value');
            } else {
                if (Object.prototype.toString.call(objData[allInputs[i].getAttribute('name')]) === '[object Array]') {
                    objData[allInputs[i].getAttribute('name')].push(allInputs[i].getAttribute('value'));
                } else {
                    var tmpValue = objData[allInputs[i].getAttribute('name')];
                    objData[allInputs[i].getAttribute('name')] = [];
                    objData[allInputs[i].getAttribute('name')].push(tmpValue);
                    objData[allInputs[i].getAttribute('name')].push(allInputs[i].getAttribute('value'))
                }
            }
        }
        alert(JSON.stringify(objData));
    </script>
    </body>
    </html>

也在Plkrhttps://plnkr.co/edit/zEid9XRXQYfxNHrXTsxu?p=preview

如果你想插入密钥多次使用这个后最后一个其他

if( Object.prototype.toString.call( objData[allInputs[i].getAttribute('name')] ) === '[object Array]' ) {
    objData[allInputs[i].getAttribute('name')].multiple.push(allInputs[i].getAttribute('value'));
} else {
    var tmpValue = objData[allInputs[i].getAttribute('name')];
    objData[allInputs[i].getAttribute('name')] = { 'multiple' : []};
    objData[allInputs[i].getAttribute('name')].multiple.push(tmpValue);
    objData[allInputs[i].getAttribute('name')].multiple.push(allInputs[i].getAttribute('value'))
}
相关文章：