微信小程序表单中获取多个相同name的input的值

首先,微信小程序是不支持直接获取的,和jquery一样直接获取name的话,只能获取到最后一组,所以要用其他的方法

直接上代码

wxml文件:

<form bindsubmit="formsubmit">
    <view wx:for="{{list}}">
        <input name="a{{index}}" value="{{item.id}}"></input>
        <input name="b{{index}}" value="{{item.value}}" ></input>
    </view>
    <button form-type="submit"></button>
</form>

js文件

formsubmit:function(e){
    var that = this;
    //首先获取到表单提交上来的值,此时input的name是不同的,为a0,a1,a2,a3...
    var eValue = e.detail.value;
    //将value对象转为map
    var mapValue = utils.objToStrMap(eValue);
    //获取list,此处的目的为获取list的长度,并通过循环拼接需要取出的names列表
    var list = that.data.list;
    //设置需要接收数据的数组
    var aList = [];
    var bList = [];
    for(var i = 0;i < list.length;i++){
       var ai = "a" + i;
       var bi = "b" + i;
       var a = mapValue.get(ai);
       var b = mapValue.get(bi);
       aList.push(a);
       bList.push(b);
    }
    //完事
    console.log(aList);
    console.log(bList);
}

utils.js文件中的objToStrMap方法

function objToStrMap(obj) {
  let strMap = new Map();
  for (let k of Object.keys(obj)) {
    strMap.set(k, obj[k]);
  }
  return strMap;
}