微信小程序(十九)——表单数据提交和小程序表单赋值(组装数据)
程序员文章站
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 => {
})
}
上一篇: c++矩阵相乘的初始值问题
下一篇: js 文字金额转换成汉字大写金额
推荐阅读
-
微信小程序学习笔记之表单提交与PHP后台数据交互处理图文详解
-
前端笔记之微信小程序(二){{}}插值和MVVM模式&数据双向绑定&指令&API
-
微信小程序 PHP后端form表单提交实例详解
-
微信小程序学习笔记之表单提交与PHP后台数据交互处理图文详解
-
微信小程序自定义组件传值 页面和组件相互传数据操作示例
-
微信小程序表单验证form提交错误提示效果
-
微信小程序授权 获取用户的openid和session_key【后端使用java语言编写】,我写的是get方式,目的是测试能否获取到微信服务器中的数据,后期我会写上post请求方式。
-
微信小程序-form表单提交代码实例
-
微信小程序云开发实现数据添加、查询和分页
-
微信小程序中form 表单提交和取值实例详解