Question

我有一个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},
   ...
  ]
}

OR

{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);

如何找出这个问题？谢谢你提前。

Answer 1

这是一些解决方案

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

也在Plkr https://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'))
}

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

1 个答案: