像上面這樣的，使用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){}})

總結

以上是生活随笔為你收集整理的小程序 循环中有多个input，怎么获取每个input输入框的值的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。