鍍金池/ 問答/HTML/ 如何用JS使相同name的幾個input獲取其值并用最簡單的方法變?yōu)橄胍膉so

如何用JS使相同name的幾個input獲取其值并用最簡單的方法變?yōu)橄胍膉son格式

舉例：

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"
    ]
}

請問應(yīng)該怎么做？

回答
編輯回答
莫小染

建議你加個class

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

js

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

這樣更簡單更實用

2018年3月29日 04:30
編輯回答
茍活

要實現(xiàn)這樣的Form表單上傳并不容易，建議改用Ajax來傳遞JSON

2018年4月27日 17:28
編輯回答
熊出沒
<!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>
2018年4月18日 11:23