欢迎您访问程序员文章站本站旨在为大家提供分享程序员计算机编程知识!
您现在的位置是: 首页

微信小程序(十九)——表单数据提交和小程序表单赋值(组装数据)

程序员文章站 2022-04-04 20:49:55
...

前端表单代码.wxml:

<form >
  <view class='form-box'>
    <view class='form-item'>
      <view class='form-title cur'>姓名</view>
       <input placeholder='请输入患者姓名' data-type='name' bindinput='changeOrderData' type='text' confirm-type='next'></input>
    </view>
    <view class='form-item'>
      <view class='form-title cur'>年龄</view>
       <input placeholder='请输入患者年龄' data-type='age' type='number' bindinput='changeOrderData' maxlength='3' confirm-type='next'></input>
    </view>
    <view class='form-item'>
      <view class='form-title cur'>性别</view>
      <radio-group class="radio-group"  name='sex' data-type='sex' bindchange='changeOrderData'>
      <label class="radio" wx:for="{{sex}}" wx:key="id">
        <radio value="{{item.name}}"  checked="{{item.checked}}" />{{item.value}}
      </label>
    </radio-group>
    </view>
    <view class='form-item'>
      <view class='form-title cur'>手机</view>
      <input data-type='phone' bindinput='changeOrderData' type="number" placeholder="请输入联系手机号"  maxlength='11'class='form-input'></input>
    </view>
  </view>

  <view class="doc-main">
  <button class='btn success block lg' bindtap='submitOrder' formType="reset"> 提交
    <text class='iconfont icon-roundright ml-xs'></text>
  </button>
</view>
</form>

事件绑定:

bindchange='changeOrderData'

.js代码:

 /**
   * 表单赋值
   */
  changeOrderData(e){
    let order_data = this.data.orderData;
    let data_type = e.target.dataset.type;
    let value = e.detail.value;
    order_data[data_type] = value;
    this.setData({
      'orderData': order_data
    })
  },

表单提交:

 submitOrder: function () {
    let _this = this;
    let order = this.data.orderData;

//验证。。。

    util.ajax('请求路径', order, 'POST', res1 => {
    
     })
}