微信小程序> 小程序form表单不定数量的inputselect内容提交-小程序多页表单-小程序表单制作

小程序form表单不定数量的inputselect内容提交-小程序多页表单-小程序表单制作

浏览量:1592 时间: 来源:hangGe0111

1.1.wxml

viewstyle="width:630rpx;margin:0auto;"formbindsubmit="formSubmit"report-submit="{{true}}"!--楼盘名称--viewclass='jg_inputflexflexSbalignC'viewclass='jg_input_l'商户名称/viewviewclass='jg_input_r'pickerclass='jg_input_picker'bindchange="jgPickerChange"value="{{jgIndex}}"range="{{jgArray}}"range-key="{{'name'}}"viewclass="picker"{{jgIndex=0?jgArray[jgIndex].name:"请选择"}}/view/picker/view/viewblockwx:for="{{jgBmXmSj}}"viewclass='jg_inputflexflexSbalignCmt30'viewclass='jg_input_l'{{item.name}}/viewviewclass='jg_input_r'!--2:报名序号;3:手机号码;4:姓名--blockwx:if='{{item.id==2}}'inputmaxlength="30"class='jg_input_in'name='baoMingbmxh'/input/blockblockwx:if='{{item.id==3}}'inputmaxlength="11"type='number'class='jg_input_in'name='baoMingsjhm'/input/blockblockwx:if='{{item.id==4}}'inputmaxlength="5"type='text'class='jg_input_in'name="baoMingxm"/input/block/view/view/block!--立即查询--viewclass='jg_ljcx'buttonclass='jg_ljcx'formType="submit"立即查询/button/view/form/view

2.2.wxss

.jg_input{font-size:34rpx;}.jg_input_l{width:140rpx;color:#222;}.jg_input_r{width:470rpx;height:70rpx;background-color:#e9e9e9;border-radius:4rpx;-webkit-border-radius:4rpx;-moz-border-radius:4rxp;}.mt30{margin-top:30rpx;}.jg_input_in{padding:015rpx;height:70rpx;line-height:70rpx;}.jg_input_picker{padding:015rpx;height:70rpx;line-height:70rpx;}.jg_input_picker.picker{width:100%;height:100%;background-image:url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAA4AAAAICAYAAADJEc7MAAAAGXRFWHRTb2Z0d2FyZQBBZG9iZSBJbWFnZVJlYWR5ccllPAAAAyZpVFh0WE1MOmNvbS5hZG9iZS54bXAAAAAAADw/eHBhY2tldCBiZWdpbj0i77u/IiBpZD0iVzVNME1wQ2VoaUh6cmVTek5UY3prYzlkIj8+IDx4OnhtcG1ldGEgeG1sbnM6eD0iYWRvYmU6bnM6bWV0YS8iIHg6eG1wdGs9IkFkb2JlIFhNUCBDb3JlIDUuNi1jMTM4IDc5LjE1OTgyNCwgMjAxNi8wOS8xNC0wMTowOTowMSAgICAgICAgIj4gPHJkZjpSREYgeG1sbnM6cmRmPSJodHRwOi8vd3d3LnczLm9yZy8xOTk5LzAyLzIyLXJkZi1zeW50YXgtbnMjIj4gPHJkZjpEZXNjcmlwdGlvbiByZGY6YWJvdXQ9IiIgeG1sbnM6eG1wPSJodHRwOi8vbnMuYWRvYmUuY29tL3hhcC8xLjAvIiB4bWxuczp4bXBNTT0iaHR0cDovL25zLmFkb2JlLmNvbS94YXAvMS4wL21tLyIgeG1sbnM6c3RSZWY9Imh0dHA6Ly9ucy5hZG9iZS5jb20veGFwLzEuMC9zVHlwZS9SZXNvdXJjZVJlZiMiIHhtcDpDcmVhdG9yVG9vbD0iQWRvYmUgUGhvdG9zaG9wIENDIDIwMTcgKFdpbmRvd3MpIiB4bXBNTTpJbnN0YW5jZUlEPSJ4bXAuaWlkOjFBRjM4MTE4ODk2MTExRThBOUI4Q0ZCMjgyOUIxNEJCIiB4bXBNTTpEb2N1bWVudElEPSJ4bXAuZGlkOjFBRjM4MTE5ODk2MTExRThBOUI4Q0ZCMjgyOUIxNEJCIj4gPHhtcE1NOkRlcml2ZWRGcm9tIHN0UmVmOmluc3RhbmNlSUQ9InhtcC5paWQ6MUFGMzgxMTY4OTYxMTFFOEE5QjhDRkIyODI5QjE0QkIiIHN0UmVmOmRvY3VtZW50SUQ9InhtcC5kaWQ6MUFGMzgxMTc4OTYxMTFFOEE5QjhDRkIyODI5QjE0QkIiLz4gPC9yZGY6RGVzY3JpcHRpb24+IDwvcmRmOlJERj4gPC94OnhtcG1ldGE+IDw/eHBhY2tldCBlbmQ9InIiPz6Y/3I7AAAAZElEQVR42mJcuHDhNAYGhkwG0sB0JiCRC8SbSNAEUpsL0vgXiCOB+CQRmk5C1f5lggp8A2JfIL6DR9MdqBqQWgYmJInXQOwJpdEBhhwTPlPxuYYJnz/w+Z8FX8hB5bGGOECAAQDsdhzUIfF/ewAAAABJRU5ErkJggg==);background-repeat:no-repeat;background-position:rightcenter;background-size:14rpx8rpx;}.jg_ljcx{width:630rpx;height:100rpx;line-height:100rpx;text-align:center;color:#fff;font-size:32rpx;background-color:#01a3e1;border-radius:4rpx;-webkit-border-radius:4rpx;-moz-border-radius:4rxp;margin-top:53rpx;}.jg_bottom{font-size:26rpx;color:#999;text-align:center;padding-bottom:36rpx;padding-top:30rpx;}.mt20{margin-top:20rpx;}.flex{display:-webkit-box;display:-moz-box;display:-ms-flexbox;display:-webkit-flex;display:flex;display:box;flex-wrap:wrap;}.flexC{-webkit-box-pack:center;justify-content:center;-webkit-justify-content:center;-moz-justify-content:center;-ms-justify-content:center;-o-justify-content:center;}.flexSb{justify-content:space-between;-webkit-justify-content:space-between;-moz-justify-content:space-between;-ms-justify-content:space-between;-o-justify-content:space-between;}.alignC{align-items:center;-webkit-box-align:center;-webkit-align-items:center;-moz-align-items:center;-ms-align-items:center;-o-align-items:center;}

3.3.js

//pages/apply/merchantsSettled/merchantsSettled.jsvarapp=getApp();varthat;Page({data:{//结果查询,商户名称jgArray:[{id:7,name:"我是商户one",res_queryconf:[{id:"2",name:"报名序号",key:"baoming"},{id:"3",name:"手机号码",key:"phone"},{id:"4",name:"姓名",key:"name"}]},{id:8,name:"我是商户two",res_queryconf:[{id:"2",name:"报名序号",key:"baoming"}]}],jgIndex:-1,//结果查询=》商户名称,通过商户名称不同展示不同个数input框jgBmXmSj:[],//slectidbaoMingParamsLpId:''},onLoad:function(options){that=this;},//结果查询,商户名称jgPickerChange:function(e){varjgBmXmSjArr=that.data.jgArray[e.detail.value]that.setData({jgIndex:e.detail.value,jgBmXmSj:jgBmXmSjArr.res_queryconf,baoMingParamsLpId:jgBmXmSjArr.id});console.log(jgBmXmSjArr);console.log(that.data.jgBmXmSj);console.log(that.data.baoMingParamsLpId);},//结果查询=》立即查询按钮formSubmit:function(event){console.log(event)vareventValue=event.detail.value;varinfo={lpid:that.data.baoMingParamsLpId,baoming:eventValue.baoMingbmxh,phone:eventValue.baoMingsjhm,name:eventValue.baoMingxm,};varshowFlag={baomingFlag:false,phoneFlag:false,nameFlag:false};//2:报名序号(baoMingbmxh);3:手机号码(baoMingsjhm);4:姓名(baoMingxm)varjgBmXmSj=that.data.jgBmXmSjfor(vari=0;ijgBmXmSj.length;i++){if(jgBmXmSj[i].id==2){showFlag.baomingFlag=true;}if(jgBmXmSj[i].id==3){showFlag.phoneFlag=true;}if(jgBmXmSj[i].id==4){showFlag.nameFlag=true;}}console.log(info);//商户idif(!info.lpid||((!info.baoming)(showFlag.baomingFlag))||((!info.name)(showFlag.nameFlag))){wx.showToast({title:'请完善信息',icon:'loading',duration:1500});}elseif((!info.phone)(showFlag.nameFlag)){wx.showToast({title:'请输入手机号',icon:'loading',duration:1500});}else{//进行接口请求console.log('success')}},})

4.4.效果展示

5.5.说明

6.(1)picker有一个range-key属性(当range是一个ObjectArray时,通过range-key来指定Object中key的值作为选择器显示内容),这个属性很方便使用,循环的可以是ObjectArray,官网api中也有提到https://developers.weixin.qq.com/miniprogram/dev/component/picker.html

7.(2)当使用form表单提交时:

8.①form表单必须写明bindsubmit="formSubmit";

9.②提交按钮必须写明formType="submit";

10.③input框必须绑定不同的name属性(因为最终获取输入框的值是通过该属性获得的);

11.④绑定事件,事件名称和form的bindsubmit后的名称相同

formSubmit:function(e){console.log('form发生了submit事件,携带数据为:',e.detail.value)},

12.(3)使用picker时,展示的是name但提交的却是id,可以通过bindchange事件在点击时,获取对应数组对应项的id值

版权声明

即速应用倡导尊重与保护知识产权。如发现本站文章存在版权问题,烦请提供版权疑问、身份证明、版权证明、联系方式等发邮件至197452366@qq.com ,我们将及时处理。本站文章仅作分享交流用途,作者观点不等同于即速应用观点。用户与作者的任何交易与本站无关,请知悉。

  • 头条
  • 搜狐
  • 微博
  • 百家
  • 一点资讯
  • 知乎