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

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

思路: 

  1. 假设后台接口返回了表格中的数据,我们在Page 下的 data 中存为 list: []。再定义一个变量 submitData, 用来存放每条数据中输入框输入的数据和输入状态(输入框是否有值)。
  2. 里面有多少个输入框,就给多少个输入框设置一个变量,变量值为 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>
      <!-- 表格输
在微信小程序wx:for循环中,如果需要获取一个索引的多个输入框,可以使用数据绑定和事件处理函数相结合的方式来实现。 具体做法是,在每个输入框上设置一个data-index属性,并将其设置为当前循环的索引index。然后,在输入框input事件处理函数中,通过event.target.dataset.index来获取到当前输入框的索引,并将输入框存储到对应的数组中。 例如,假设有一个数组列表dataList需要渲染,每个列表项都包含两个输入框,需要获取每个输入框: ``` <view wx:for="{{dataList}}" wx:key="{{index}}"> <view class="list-item"> <input type="text" data-index="{{index}}" bindinput="onInput1" /> <input type="text" data-index="{{index}}" bindinput="onInput2" /> </view> </view> ``` 在这个例子中,我们在每个输入框上绑定了data-index属性,并将其设置为当前循环的索引index。然后,在onInput1和onInput2事件处理函数中,我们可以通过event.target.dataset.index获取到当前输入框的索引,并将输入框存储到对应的数组inputValue1和inputValue2中。 ``` Page({ data: { dataList: [], inputValue1: [], inputValue2: [] }, onInput1: function(event) { var index = event.target.dataset.index; var value = event.detail.value; this.data.inputValue1[index] = value; }, onInput2: function(event) { var index = event.target.dataset.index; var value = event.detail.value; this.data.inputValue2[index] = value; } }) ``` 需要注意的是,在使用数据绑定和事件处理函数的方式时,需要确保数组inputValue1和inputValue2的长度与dataList的长度相同,否则可能会出现数组越界等问题。
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值