如何用JS使相同name的几个input获取其值并用最简单的方法变为想要的json格式

举例：

form表单中有如下几个input

<input type="text" name="brand" value="XX品牌">
<input type="text" name="model" value="XX型号">

<input type="text" name="upload_pic" value="111">
<input type="text" name="upload_pic" value="222">
<input type="text" name="upload_pic" value="333">

期望让name相同的几个upload_pic变成如下样子

{
    "brand": "XX品牌",
    "model": "XX型号",
    "upload_pic": [
        "111",
        "222",
        "333"
    ]
}

请问应该怎么做？

javascript

阅读 4.3k

3 个回答

nurdun

✓ 已被采纳

建议你加个class

<input type="text" class="upload_pic" name="upload_pic" value="333">

var upload_pic = new Array();
var len = document.querySelectorAll(".upload_pic").length;
for(var i = 0;i<len;i++){
    var v =document.querySelectorAll(".upload_pic")[i].value();
    upload_pic.push(v);
}

这样更简单更实用

小翼

5.9k3627

发布于
2017-12-01

<!DOCTYPE html>
  <html lang="en">
  <head>
    <meta charset="UTF-8">
    <script>
      function getValues() {
        const values = {upload_pic: []};
        document.getElementsByName('upload_pic').forEach(pic => {
          values.upload_pic.push(pic.value);
        });
        values.brand = document.getElementsByName('brand')[0].value
        values.model = document.getElementsByName('model')[0].value
        console.log(values);
        document.getElementById('result').innerHTML = JSON.stringify(values);
      }
    </script>
  </head>
  <body onload="getValues()">
    <input type="text" name="brand" value="XX品牌">
    <input type="text" name="model" value="XX型号">

    <input type="text" name="upload_pic" value="111">
    <input type="text" name="upload_pic" value="222">
    <input type="text" name="upload_pic" value="333">
    <p>
    <p id="result"></p>
  </body>
</html>