小程序循环中有多个input，怎么获取每个input输入框的值

像上面这样的，使用form表单结构不太合理。官方文档中 wx.createSelectorQuery() 方法我这里总是打印不出值，所以只好通过输入框的事件来做判断，因为提交时，上面所有的输入框都是要有值的，也就意味着这些输入框都会使用到 input 事件。

思路：

假设后台接口返回了表格中的数据，我们在Page 下的 data 中存为 list: []。再定义一个变量 submitData，用来存放每条数据中输入框输入的数据和输入状态（输入框是否有值）。
里面有多少个输入框，就给多少个输入框设置一个变量，变量值为 false 时表示输入框没有值。
这里有两种类型，所以每条数据要定义两个变量，一个变量 isBottleNum 表示实收瓶数的输入框，一个变量 "isBoxNum" 表示实收箱数的输入框。
根据后台返回的表格数据，有几条数据，就给几条数据中插入 "isBottleNum": false,"isBoxNum": false
3. 提交时，判断每条数据中"isBottleNum","isBoxNum"的值是否为 true，都为 true 表示每条数据的两个输入框中填写了值，有 false 表示有某个输入框的值是 “” 空的。

wxml

  <!-- 表格数据--> <view class="real_detail gray_line"><view class="tr"><view class="th">序号</view><view class="th">商品名称</view><view class="th">规格</view><view class="th">实收瓶数</view><view class="th">实收箱数</view></view><!-- 表格输入框数据。--><!-- data-shopname最好传后台需要的每条数据的标识，这里我用的商品名称做标识 --><!-- data-input是用来判断点击的输入框是属于实收瓶数的，还是实收箱数的 --><view class="tr" wx:for="{{list}}" wx:key="index" ><view class="td">{{index+1}}</view><view class="td over" data-text="{{item.collectionSkuClassName}}" bindtap="showText">{{item.collectionSkuClassName}}</view><view class="td">{{item.size/10}}</view><view class="td"><input class="num_input" type="number" data-collectionSkuId="{{item.collectionSkuId}}" data-input="实收瓶数" data-index="{{index}}" bindinput="getReallNum"/></view><view class="td"><input class="num_input" type="number" data-collectionSkuId="{{item.collectionSkuId}}" data-input="实收箱数" data-index="{{index}}" bindinput="getReallNum"/></view></view></view><!-- 验证码&提交 --><view class="submit_view"><view class="submit_btn_view"><button class="submit_btn" bindtap="submit">提交</button></view></view>

这里先看看我们后台返回来的数据格式和需要提交给他的参数格式：

//后台返回的格式
res: [{collectionSkuClassName: "XO",collectionSkuId: "1034786",hanghao: 1,labelType: null,limitedEdition: 0,newBoxSum: 1,oldBoxSum: 0,packNum: 6,planLabelNum: 6,planNum: 1,realCaseNum: 0,realLabelNum: 0,remark: null,shiji: 0,size: 700,sizeTemp: "70"},{collectionSkuClassName: "VSOP",collectionSkuId: "1034786",hanghao: 1,labelType: null,limitedEdition: 0,newBoxSum: 1,oldBoxSum: 0,packNum: 6,planLabelNum: 6,planNum: 1,realCaseNum: 0,realLabelNum: 0,remark: null,shiji: 0,size: 700,sizeTemp: "70"},
]//提及数据时需要的格式
{"noteId": "提交时该页面的参数","skuCountLis": [{"caseNum": 输入的箱数,"collectionSkuId": "每条数据的编号id","labelNum": 输入的瓶数}],"token": "string"
}

js JS中三个点（...）是什么鬼？

/**
* submitData: [ //提交的参数
*      {shopName: "商品名称","bottleNum": "实收瓶数", "boxNum":"实收箱数", isBottleNum: false, isBoxNum: false}
*       {shopName: "商品名称","bottleNum": "实收瓶数", "boxNum":"实收箱数", isBottleNum: false, isBoxNum: false}
*     ] //shopName: 每条数据的标识， isBottleNum、isBoxNum:分别表示实收瓶数、实收箱数的输入框是否填写了数据，false表示未填写*/
Page({data: {list:[],  //表格中的数据submitData: [], //存储实收情况中的输入框是否填写，每个输入框的数据（不是最终提交的数据，但提交的数据来自它）},// 生命周期函数--监听页面加载onLoad: function (options) {this.initData();},initData(){let that = this;that.data.submitData = [];//调用接口 request.post 是自己封装的请求方法request.post(接口名称, 参数).then((res)=>{ that.setData({list: [...res]}); //表格数据//处理submitDataif( that.data.list && that.data.list.length != 0){that.data.list.map((item,index)=>{      //先给实收瓶数、实收箱数两个属性。提交时判断这个属性是否为false，false表示还有输入框未填写that.data.submitData.push({"isBottleNum": false,"isBoxNum": false});});        } else {}})},//显示隐藏的文字showText(e){    const {text} = e.target.dataset;wx.showToast({ title: text,  icon: "none",  duration: 2000 });},//获取每个输入框的数据，并且把输入框的数据传到submitData中getReallNum(e){//input：输入框类型、collectionskuid：当前项的标识、index：当前项的索引、inputValue：当前输入框的值const that = this;let {input, collectionskuid,index} = e.target.dataset;let inputValue = e.detail.value;if(input == "实收瓶数"){if(inputValue !=""){//isBottleNum： 判断实收瓶数是否填写；id：后台需要的标识；bottleNum:填写的实收瓶数   that.data.submitData[index].id = collectionskuid;that.data.submitData[index].isBottleNum = true;that.data.submitData[index].bottleNum = inputValue;} else {that.data.submitData[index].isBottleNum = false;}          } else if(input == "实收箱数"){      if(inputValue !=""){//isBoxNum： 判断实收箱数是否填写；id：后台需要的标识；boxNum:填写的实收瓶数     that.data.submitData[index].id = collectionskuid;that.data.submitData[index].isBoxNum = true;that.data.submitData[index].boxNum = inputValue;} else {that.data.submitData[index].isBoxNum = false;}}    },//提交按钮事件，处理this.data.submitData的数据submit: function() { var that = this;let params = [];//这里将上面自己给输入框定义的名称改成了需要传给后台的字段名（可以在一开始就bottleNum等把定义成后台需要的字段名）。that.data.submitData.map((item, index)=>{if(item.isBottleNum && item.isBoxNum){params.push({collectionSkuId: item.id, labelNum: item.bottleNum,caseNum: item.boxNum});        }});//判断输入框中是否填写 “0”let labelNumZero = params.some(item=>item.labelNum==0);let caseNumZero = params.some(item=>item.caseNum==0);if(labelNumZero || caseNumZero){wx.showToast({ title: '存在非法数据，请仔细检查再提交！', icon: 'none' });return ;}//若长度==表格中的长度，则跳转到回执页面,不允许用户再返回到当前页面做修改if(params.length == that.data.submitData.length){if( that.data.totalCaseNum != that.data.billDetail.applyTotalBox ){wx.showModal({title: '提示',content: '实际总数与申请总数不相等，确定提交吗？',success: (res)=> {if (res.confirm) { //用户点击确定that.submitDetail(params); //调用接口} else if (res.cancel) {console.log('用户点击取消');}}})} else {      that.submitDetail(params); //调用接口}     } else {   wx.showToast({ title: '数据未填写完整！', icon: 'none' });}},//调用提交数据的接口,params为参数：[{collectionSkuId:"",labelNum:1,caseNum:1},{}]submitDetail(params){}})

本文来自互联网用户投稿，该文观点仅代表作者本人，不代表本站立场。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如若转载，请注明出处：http://www.mzph.cn/news/362437.shtml

如若内容造成侵权/违法违规/事实不符，请联系多彩编程网进行投诉反馈email:809451989@qq.com，一经查实，立即删除！