小程序 循环中有多个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><!-- 表格输入框数据。--><!-- 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，一经查实，立即删除！

相关文章

了解JUnit的Runner架构

了解JUnit的Runner架构

几周前&#xff0c;我开始创建一个小的JUnit Runner&#xff08; Oleaster &#xff09;&#xff0c;它允许您使用Jasmine方式在JUnit中编写单元测试。 我了解到&#xff0c;创建自定义JUnit Runners实际上非常简单。 在本文中&#xff0c;我想向您展示JUnit Runner在内部如何工…
阅读更多...
C# DateTime 格式

C# DateTime 格式

C# DateTime 格式 DateTime dt DateTime.Now;//Label1.Text dt.ToString();//2005-11-5 13:21:25//Label2.Text dt.ToFileTime().ToString();//127756416859912816//Label3.Text dt.ToFileTimeUtc().ToString();//127756704859912816//Label4.Text dt.ToLocalTime().ToStri…
阅读更多...
琼瑶哀悼丈夫去世

琼瑶哀悼丈夫去世

转载于:https://www.cnblogs.com/gitwow/p/10982911.html
阅读更多...
js slice 参数为负值

js slice 参数为负值

示例代码 <!DOCTYPE html><html lang"zh"><head><meta charset"UTF-8" /><meta name"viewport" content"widthdevice-width, initial-scale1.0" /><meta http-equiv"X-UA-Compatible" con…
阅读更多...
vue 简单实用的elementUI表格封装

vue 简单实用的elementUI表格封装

在写这个表格组件之前&#xff0c;要了解 slot 插槽的使用。 目录 1.子组件&#xff1a;子组件调用父组件的方法 this.$parent.方法名 2.父组件使用 2.1 父组件&#xff08;普通表格&#xff09;&#xff1a; 2.2 父组件&#xff08;表格中的某一项数据需要修改&#xff0…
阅读更多...
Java私有，受保护，公共和默认

Java私有，受保护，公共和默认

您是Java程序员&#xff0c;所以您知道我在说什么。 public修饰符使方法或字段可从应用程序中的任何位置访问。 那是简单的部分。 但是&#xff0c;您能告诉我protected包和私有包的区别吗&#xff1f; &#xff08;提示&#xff1a;当您不在方法或字段前面编写任何访问修饰符时…
阅读更多...
vue vuex 大型项目demo示例

vue vuex 大型项目demo示例

1、vuex 动态模块配置 import Vue from vueimport Vuex from vueximport store from /store;// 使用Vuex插件&#xff0c;即使插件被调用多次&#xff0c;插件也只会安装一次Vue.use(Vuex);// state存储数据的状态const state {// 数据状态name: mfg}// getters获取数据状态co…
阅读更多...
【学习】012 垃圾回收机制算法分析

【学习】012 垃圾回收机制算法分析

垃圾回收机制概述 Java语言中一个显著的特点就是引入了垃圾回收机制&#xff0c;使c程序员最头疼的内存管理的问题迎刃而解&#xff0c;它使得Java程序员在编写程序的时候不再需要考虑内存管理。由于有个垃圾回收机制&#xff0c;Java中的对象不再有“作用域”的概念&#xff0…
阅读更多...
js 计算对象数组中某个属性值重复出现的个数

js 计算对象数组中某个属性值重复出现的个数

转载于&#xff1a;前进中的蜗牛 let list [{name:"1000积分",serialNumber:6},{name:"500积分",serialNumber:7},{name:"50积分",serialNumber:8},{name:"50积分",serialNumber:8},{name:"50积分",serialNumber:8} ];//怎…
阅读更多...
介绍JBoss BPM Suite安装程序

介绍JBoss BPM Suite安装程序

本周&#xff0c;我们想向您介绍JBoss BRMS和JBoss BPM Suite产品随附的一个鲜为人知的安装程序组件。 请注意&#xff0c;当前所有的演示项目都要求您下载JBoss BPM Suite可部署的eap zip产品文件和JBoss EAP 6.1.1 zip产品文件。 展望未来&#xff0c;我们将迁移所有项目&am…
阅读更多...
小程序 报错errMsg: “hideLoading:fail:toast can‘t be found“ ？

小程序 报错errMsg: “hideLoading:fail:toast can‘t be found“ ？

小程序体验版上/真机上报错&#xff1a;errMsg: "hideLoading:fail:toast cant be found" &#xff1f;模拟器上却看不到&#xff0c; wx.showLoading 和 wx.showToast 同时只能显示一个&#xff1b;wx.showLoading 应与 wx.hideLoading 配对使用&#xff1b;把请求…
阅读更多...
世界名牌大学课件下载地址

世界名牌大学课件下载地址

一、加州大学伯克利分校 http://webcast.berkeley.edu/courses.php 作为美国第一的公立大学&#xff0c;伯克利分校提供了许多优秀教授的播客和视频讲座&#xff0c;可以跟踪最新的讲座。想看教授布置的作业和课堂笔记&#xff0c;可以点击该教授的网页&#xff0c;通常&#…
阅读更多...
jquery-deferred应用

jquery-deferred应用

我们说jquery1.5之后用的用deferred&#xff0c;那么deferred到底是个什么东西&#xff0c;看个例子var wait function(){var task function(){console.log(执行完成);}setTimeout(task, 2000); } wait(); 现在在task里面的执行完成之后进行某些特别复杂的操作&#xff0c;代…
阅读更多...
自动装箱，拆箱和NoSuchMethodError

自动装箱，拆箱和NoSuchMethodError

J2SE 5为Java编程语言引入了许多功能。 这些功能之一是自动装箱和拆箱 &#xff0c;这是我几乎每天都没有考虑过的功能。 它通常很方便&#xff08;尤其是与收藏夹一起使用时&#xff09;&#xff0c;但有时会导致一些令人讨厌的惊喜 &#xff0c;即“ 怪异 ”和“ 疯狂” 。 在…
阅读更多...
vue 不能监测数组长度变化length的原因

vue 不能监测数组长度变化length的原因

由于 JavaScript 的限制&#xff0c;Vue 不能检测以下变动的数组&#xff1a; 当你利用索引直接设置一个项时&#xff0c;例如&#xff1a; vm.items[indexOfItem] newValue 当你修改数组的长度时&#xff0c;例如&#xff1a; vm.items.length newLength因为vue的响应式是通…
阅读更多...
vue 动态显示三级路由

vue 动态显示三级路由

无需 vuex、本地存储实现动态显示三级路由。 目录 一、需求描述&#xff1a; 二、代码 2.1 路由配置 1. 我的一级菜单和二级菜单的路由配置的&#xff1a; 2. 三级菜单的路由配置&#xff1a; 3. 上面有几个变量和要注意的细节&#xff1a; 2.2 封装导航栏 2.3 封装面…
阅读更多...
第二章 Vue快速入门-- 18 v-for中key的使用注意事项

第二章 Vue快速入门-- 18 v-for中key的使用注意事项

注意:如果属性和方法还没定义直接使用的话&#xff0c;就会报 xxx is not defined 导致界面不能正常显示。我看视频教程里老师的可以直接使用&#xff0c;而且界面正常显示&#xff0c;可能是vue版本不同吗&#xff1f;还不清楚 1 <!DOCTYPE html>2 <html lang"…
阅读更多...
口碑网发布2010吃住玩消费风向指数

口碑网发布2010吃住玩消费风向指数

当在淘宝网上买衣服、买电器、买……都变得司空见惯&#xff0c;下一步我们会在网上完成什么消费&#xff1f; 通过网购等电子商务模式的带动&#xff0c;电子商务平台对于老百姓日常消费、生活的影响逐渐深化。原本更多依靠传统手段完成的吃住玩等生活消费&#xff0c;现在也…
阅读更多...
Java并发教程–线程安全设计

Java并发教程–线程安全设计

在回顾了处理并发程序时的主要风险&#xff08;如原子性或可见性 &#xff09;之后&#xff0c;我们将进行一些类设计&#xff0c;以帮助我们防止上述错误。 其中一些设计导致了线程安全对象的构造&#xff0c;从而使我们可以在线程之间安全地共享它们。 作为示例&#xff0c;我…
阅读更多...
ES6 iterator 迭代器

ES6 iterator 迭代器

iterator使用TypeScript 的描述&#xff1a; interface Iterable {[Symbol.iterator]() : Iterator,}interface Iterator {next(value?: any) : IterationResult,}interface IterationResult {value: any,done: boolean,} 一个数据结构只要具有 Symbol.iterator属性&#xff0…
阅读更多...
最新文章

Copyright @ 2022~2023