小程序form表单不定数量的input，select内容提交

1.wxml

<view style="width:630rpx;margin:0 auto;">
  <form bindsubmit="formSubmit" report-submit="{{true}}">
    <!--楼盘名称  -->
    <view class='jg_input flex flexSb alignC'>
      <view class='jg_input_l'>商户名称</view>
      <view class='jg_input_r'>
        <picker class='jg_input_picker' bindchange="jgPickerChange" value="{{jgIndex}}" range="{{jgArray}}" range-key="{{'name'}}">
          <view class="picker">
            {{jgIndex>=0?jgArray[jgIndex].name:"请选择"}}
          </view>
        </picker>
      </view>
    </view>

    <block wx:for="{{jgBmXmSj}}">
      <view class='jg_input flex flexSb alignC mt30'>
        <view class='jg_input_l'>{{item.name}}</view>
        <view class='jg_input_r'>
          <!-- 2:报名序号；3：手机号码；4：姓名 -->
          <block wx:if='{{item.id==2}}'>
            <input maxlength="30" class='jg_input_in' name='baoMingbmxh'></input>
          </block>
          <block wx:if='{{item.id==3}}'>
            <input maxlength="11" type='number' class='jg_input_in' name='baoMingsjhm'></input>
          </block>
          <block wx:if='{{item.id==4}}'>
            <input maxlength="5" type='text' class='jg_input_in' name="baoMingxm"></input>
          </block>
        </view>
      </view>
    </block>

    <!-- 立即查询 -->
    <view class='jg_ljcx'>
      <button class='jg_ljcx' formType="submit">立即查询</button>
    </view>
  </form>
</view>

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: 0 15rpx;
  height: 70rpx;
  line-height: 70rpx;
}

.jg_input_picker {
  padding: 0 15rpx;
  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: right center;
  background-size: 14rpx 8rpx;
}

.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.js

// pages/apply/merchantsSettled/merchantsSettled.js 
var app = getApp();
var that;
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: [],
    //slectid
    baoMingParamsLpId:''
  },
  onLoad: function(options) {
    that=this;
  },
  // 结果查询，商户名称
  jgPickerChange: function (e) {
    var jgBmXmSjArr = 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)
    var eventValue = event.detail.value;

    var info = {
      lpid: that.data.baoMingParamsLpId,
      baoming: eventValue.baoMingbmxh,
      phone: eventValue.baoMingsjhm,
      name: eventValue.baoMingxm,
    };

    var showFlag = {
      baomingFlag: false,
      phoneFlag: false,
      nameFlag: false
    };
    // 2: 报名序号(baoMingbmxh)；3：手机号码(baoMingsjhm)；4：姓名(baoMingxm)
    var jgBmXmSj = that.data.jgBmXmSj
    for (var i = 0; i < jgBmXmSj.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);

    //商户id
    if (!info.lpid || ((!info.baoming) && (showFlag.baomingFlag)) || ((!info.name) && (showFlag.nameFlag))) {
      wx.showToast({
        title: '请完善信息',
        icon: 'loading',
        duration: 1500
      });
    } else if ((!info.phone) && (showFlag.nameFlag)) {
      wx.showToast({
        title: '请输入手机号',
        icon: 'loading',
        duration: 1500
      });
    } else {
      //进行接口请求
      console.log('success')
      
    }

  },

})

4.效果展示

5.说明

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

（2）当使用form表单提交时：

①form表单必须写明bindsubmit="formSubmit"；

②提交按钮必须写明formType="submit"；

扫描二维码关注公众号，回复： 2475189 查看本文章

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

④绑定事件，事件名称和form的bindsubmit后的名称相同

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

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

小程序form表单不定数量的input，select内容提交

猜你喜欢