小程序动态新增表单并取值提交功能

自己在小程序开发过程中的需求,动态新增表单元素及提交表单内容,代码如下
<index.wxml>

<view style="background:#fff">
   <label class="page-label" style="width:95%;margin:0 20rpx">联系信息</label>
    <block wx:for="{{formList}}" wx:key="index">
    <view class="page-ul input-border" style="border:1px solid #e1e1e1;border-radius:10rpx">        
      <view class="page-item input-border" style="border-bottom:1px solid #f5f5f5;margin:0 20rpx">
      <text class="text-color">联系人</text>
        <input class="weui-input" name="names{{index}}" data-id="{{index}}" data-attr="names" type="text" placeholder="输入联系人"  bindinput="customerinput"/>
      </view>
       <view class="page-item input-border" style="border-bottom:1px solid #f5f5f5;margin:0 20rpx">
         <text class="text-color">职位</text>
       <input class="weui-input" name="position{{index}}" data-id="{{index}}" data-attr="position" type="text" placeholder="输入职位"  bindinput="customerinput"/>
       </view>
       <view class="page-item input-border" style="margin:0 20rpx">
       <text class="xrequired">联系电话</text>
        <input class="weui-input" name="phone{{index}}" data-id="{{index}}" data-attr="phone" type="number" placeholder="输入联系电话" bindinput="customerinput" />
      </view>	
     </view>
   </block>
 <image src="../../image/additem.png" class="addcus" bindtap="additem"></image>   
  </view>

<index.js>

  // 输入框取值
  customerinput(e) {
    let _this = this;
    let ids = e.target.dataset.id
    let attribute = e.target.dataset.attr
    let Values = e.detail.value
    let formi = this.data.formList[ids]
    console.log(attribute, Values, formi)
    if (attribute == 'names') {
      formi.names = Values
    } else if (attribute == 'position') {
      formi.position = Values
    } else {
      formi.phone = Values
    }
    //最新的数组
    this.setData({
      formList: this.data.formList
    })
    console.log(this.data.formList, '先有数据')
  },
  // 新增表单
  additem(e) {
    let forms = this.data.formList;
    var newItem = {
      names: null,
      position: null,
      phone: null
    };
    let formss = forms.concat(newItem);
    console.log(formss)
    this.setData({
      formList: formss
    })
  },
  //提交并判断
  btn(){
  if (this.data.customerName&&XXX) {
      let phonearr = []
      this.data.formList.map(item => {
        if (item.phone) {
          phonearr.push(item.phone)
          this.setData({
            phonearr: phonearr
          })
        } else {
          //提示信息
        }
      })
     if (this.data.formList.length == this.data.phonearr.length) {
      		//接口逻辑
      }
    }
//css样式可以自己定义就不粘出来了
																								~快乐来自于分享
评论 2
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

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

抵扣说明:

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

余额充值