小程序 循环中有多个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在内部如何工…
阅读更多...
琼瑶哀悼丈夫去世

琼瑶哀悼丈夫去世

转载于:https://www.cnblogs.com/gitwow/p/10982911.html
阅读更多...
vue 简单实用的elementUI表格封装

vue 简单实用的elementUI表格封装

在写这个表格组件之前&#xff0c;要了解 slot 插槽的使用。 目录 1.子组件&#xff1a;子组件调用父组件的方法 this.$parent.方法名 2.父组件使用 2.1 父组件&#xff08;普通表格&#xff09;&#xff1a; 2.2 父组件&#xff08;表格中的某一项数据需要修改&#xff0…
阅读更多...
【学习】012 垃圾回收机制算法分析

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

垃圾回收机制概述 Java语言中一个显著的特点就是引入了垃圾回收机制&#xff0c;使c程序员最头疼的内存管理的问题迎刃而解&#xff0c;它使得Java程序员在编写程序的时候不再需要考虑内存管理。由于有个垃圾回收机制&#xff0c;Java中的对象不再有“作用域”的概念&#xff0…
阅读更多...
介绍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…
阅读更多...
自动装箱，拆箱和NoSuchMethodError

自动装箱，拆箱和NoSuchMethodError

J2SE 5为Java编程语言引入了许多功能。 这些功能之一是自动装箱和拆箱 &#xff0c;这是我几乎每天都没有考虑过的功能。 它通常很方便&#xff08;尤其是与收藏夹一起使用时&#xff09;&#xff0c;但有时会导致一些令人讨厌的惊喜 &#xff0c;即“ 怪异 ”和“ 疯狂” 。 在…
阅读更多...
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"…
阅读更多...
vue 后端返回二进制流文件，前端如何实现下载？

vue 后端返回二进制流文件，前端如何实现下载？

目录 1. axios 请求二进制流文件导出文件 1.1 后台返回的二进制流&#xff1a; 1.2 使用&#xff1a; 1.3 需要注意以下几点&#xff1a; 2. 关于 arraybuffer 和 blob 2.1 ArrayBuffer 和 blob 2.2 区别 2.3 相互转换 3. 主要参考&#xff1a; 1. axios 请求二进制…
阅读更多...
python量化之路：获取历史某一时刻沪深上市公司股票代码及上市时间

python量化之路：获取历史某一时刻沪深上市公司股票代码及上市时间

python量化之路&#xff1a;获取历史某一时刻沪深上市公司股票代码及上市时间 最近开始玩股票量化&#xff0c;由于想要做完整的股票回测&#xff0c;因此股票的上市和退市信息就必不可少。因为我们回测的时候必须要知道某一日期沪深股票的成分包含哪些对吧。所以我们要把沪深全…
阅读更多...
《网页设计创意书》读后感

《网页设计创意书》读后感

刚刚收到《网页设计创意书》&#xff0c;确实有点惊喜&#xff0c;开始以为是像之前审读的书一样是一叠叠的打印纸&#xff0c;没想到是一本成品书&#xff0c;拿到手上沉甸甸的&#xff0c;随便翻看了一下&#xff0c;没想到里面竟然还是全彩页印刷的&#xff0c;本书的第一感…
阅读更多...
游戏AI –行为树简介

游戏AI –行为树简介

游戏AI是一个非常广泛的主题&#xff0c;尽管有很多资料&#xff0c;但我找不到能以较慢&#xff0c;更容易理解的速度缓慢介绍这些概念的东西。 本文将尝试解释如何基于行为树的概念来设计一个非常简单但可扩展的AI系统。 什么是AI&#xff1f; 人工智能是参与游戏的实体表现…
阅读更多...
liteos错误处理（十一）

liteos错误处理（十一）

1. 概述 1.1 基本概念 错误处理指用户代码发生错误时&#xff0c;系统调用错误处理模块的接口函数&#xff0c;完成上报错误信息&#xff0c;并调用用户自己的钩子函数&#xff0c;进行特定的处理。 错误处理模块实现OS内部错误码记录功能。OS内部错误码无法通过接口返回&#…
阅读更多...
js 变量提升与函数提升

js 变量提升与函数提升

规则&#xff1a; 函数的提升优先于变量提升。同名的函数会覆盖同名的函数与变量。同名的变量不会覆盖同名的函数。 示例代码1&#xff1a; <!DOCTYPE html><html lang"zh"><head><meta charset"UTF-8" /><meta name"vi…
阅读更多...
mockJs文档（一）

mockJs文档（一）

Mock.js 官网 目录 1. 开始安装 1.1 Node&#xff08;CommonJS&#xff09; 1.2 CMD方式 2. 语法规范 2.1 数据模板定义规范 DTD 2.1.1. 属性值是字符串 String 2.1.2. 属性值是数字 Number 2.1.3. 属性值是布尔型 Boolean 2.1.4. 属性值是对象 Object 2.1.5. 属性值…
阅读更多...
小程序 获取手机号

小程序 获取手机号

【参考小程序开发文档&#xff1a;开发-指南-开放能力-用户信息-获取手机号】 地理位置 wx.getLocation(Object object) | 微信开放文档 手机号 获取手机号 | 微信开放文档 微信信息 小程序与小游戏获取用户信息接口调整&#xff0c;请开发者注意升级。 | 微信开放社区 目录…
阅读更多...
CSS布局之脱离文档流详解——浮动、绝对定位脱离文档流的区别

CSS布局之脱离文档流详解——浮动、绝对定位脱离文档流的区别

1、代码 &#xff08;1&#xff09;示例代码1 <!DOCTYPE html><html lang"zh"><head><meta charset"UTF-8" /><meta name"viewport" content"widthdevice-width, initial-scale1.0" /><meta http-e…
阅读更多...
小程序 获取当前城市位置-高德地图

小程序 获取当前城市位置-高德地图

微信小程序 wx.getLocation 只能获取到经纬度&#xff0c;想要获取具体城市信息&#xff0c;需要使用地图插件。公司要求使用 高德地图&#xff0c;在使用上&#xff0c;几个地图的代码步骤都差不多。 目录 1. 查看官方文档 1.1 申请高德地图Key&#xff0c;点击查看申请key…
阅读更多...
网页端调用企业微信扫一扫 详细过程

网页端调用企业微信扫一扫 详细过程

效果展示&#xff08;需要使用微信内置浏览器打开&#xff09;&#xff1a; 目录 1. 快速集成H5开发应用 1.1 开始 1.2 创建应用 1.2.1 登录管理后台 1.2.2 添加自建应用 1.2.3 配置应用 1.2.4 获取应用的 AgentID 与 Secret 1.3 配置应用 1.3.1 配置应用主页 1.3.2 配置…
阅读更多...
获取ip地址

获取ip地址

代码 ///<summary>///取得客户端真实IP。如果有代理则取第一个非内网地址 ///</summary>publicstringIPAddress { get{ stringresult String.Empty; result HttpContext.Current.Request.ServerVariables["HTTP_X_FORWAR…
阅读更多...
推荐文章
最新文章

Copyright @ 2022~2023