小程序表单中 多个循环input 如何取每个input的值

具体思路:
e.detail.value 会取到表单中所有input的值,据此得到每一个input的值
再对data进行赋值

实例:
小程序表单中 多个循环input 如何取每个input的值_第1张图片
小程序表单中 多个循环input 如何取每个input的值_第2张图片

<form bindsubmit="submit">
  <view wx:for="{{model}}" wx:key="{{index}}">
    <input name="name{{index}}" placeholder="name"></input>
    <input name="sex{{index}}" placeholder="sex"></input>
  </view>
  <button form-type="submit">提交</button>
</form>

js:

Page({
 data: {
    model:[
      {id:0,name:null,sex:null},
      {id:1,name:null,sex:null}
    ]
  },
  
  submit:function(e){
    let model = this.data.model;
    let name = e.detail.value;    //  获取到form中所有input的值
    console.log(name);
    var i=0,j=1,k=0;
    for(i=0,j=0;i<model.length;i++,j++){
      var n = "name"+i;
      var s = "sex"+i;
      console.log(name[n]);
      console.log(name[s]);
      model[i].name = name[n];
      model[i].sex = name[s];
    }
    this.setData({
        model:model
       });
  }
  })

console.log(name):
小程序表单中 多个循环input 如何取每个input的值_第3张图片
得到了每一个input的name及其值,注意到数组的排列顺序是根据name的ASCII进行排序的,所以直接遍历赋值不可行。采用通过key找value的方式

submit:function(e){
    let model = this.data.model;
    let name = e.detail.value;
    console.log(name);
    var i=0,j=1,k=0;
    for(i=0,j=0;i<model.length;i++,j++){
      var n = "name"+i;   // input 名
      var s = "sex"+i;   // input 名
      console.log(name[n]);
      console.log(name[s]);
      //  name[sex0]  name[sex1]
      model[i].name = name[n];
      model[i].sex = name[s];
      //  model[0].sex = name[sex0]
      //  model[1].sex = name[sex1]
    }
    this.setData({
        model:model
       });
  },

小程序表单中 多个循环input 如何取每个input的值_第4张图片

你可能感兴趣的:(笔记)