微信小程序> 微信表单,微信小程序之获取表单数据

微信表单,微信小程序之获取表单数据

浏览量:709 时间: 来源:面壁思过程
前言:微信小程序中很多地方运用到了表单,很多时候我们需要把表单中的内容提取出来返回给后台,这里我随便写了一点
注意点:
1.所有的inputtextareabutton全部包含在form表单元素里
2.button必须有formType="submit"这个属性
3.form必须有提交事件即bindsubmit="back_houtai"
4.通过name属性取值,name名称不可重复
图示:

wxml文件!--pages/biji/biji.wxml--viewclass='index_seach'
formbindsubmit="back_houtai"
viewclass='input_wprofessional'textclass='left'总分/textviewclass='inputleft'inputplaceholder='请输入总分'cursor-spacing='20'name='total_score'/input/view/viewviewclass='input_wprofessional'textclass='left'专业课分/textviewclass='inputleft'inputplaceholder='请输入初试专业课成绩'cursor-spacing='20'name='major_score'/input/view/viewviewclass='input_wprofessional'textclass='left'入学年份/textviewclass='inputleft'inputplaceholder='请输入入学年份格式:2018'cursor-spacing='20'name='enroll_date'/input/view/viewviewclass='textarea_w'textclass='left'自我介绍/textviewclass='textarealeft'textareaplaceholder='请输入一段话来介绍一下自己,说不定会更加吸引学弟学妹哦~'cursor-spacing='20'name="self_intro"/textarea/view/viewbuttonclass='subClass_btn2'formType="submit"确定/button/form/viewwxss文件/pages/biji/biji.wxss/page{font-size:30rpx;}.left{float:left}.right{float:right}.index_seach{width:100%;margin-top:20rpx;height:auto;margin-bottom:30rpx;}/表单类通用表单类通用表单类通用/.input_w{width:100%;height:90rpx;line-height:90rpx;/background:lightblue;/}.input_wtext{display:block;width:20%;text-align:center;/background:red;/}.input_w.input{width:75%;height:70rpx;margin-top:10rpx;border:1pxsolid#ccc;box-sizing:border-box;}.inputinput{margin-top:10rpx;margin-left:10rpx;/background:lightblue;/}.textarea_w{display:block;width:100%;height:180rpx;overflow:hidden;}.textarea_wtext{display:block;width:20%;text-align:center;line-height:90rpx;}.textarea{width:75%;height:140rpx;margin-top:10rpx;border:1pxsolid#ccc;padding:8rpx;/background:lightblue;/overflow:hidden;}.textareatextarea{width:100%;height:130rpx;/background:lightcoral;/}/表单类通用表单类通用表单类通用/.subClass_btn2{margin-top:40rpx;width:80%;height:80rpx;line-height:80rpx;font-size:30rpx;color:#fff;background:#20bd03;}js文件
通过e.detial.value.name名获取表单元素值
//pages/biji/biji.jsPage({/页面的初始数据/data:{},//确认按钮把数据上传后台back_houtai:function(e){varthat=this;vartotal_score=e.detail.value.total_score;//总分varmajor_score=e.detail.value.major_score;//专业分varenroll_date=e.detail.value.enroll_date;//年份varself_intro=e.detail.value.self_intro;//个人介绍console.log(total_score)console.log(major_score)console.log(enroll_date)console.log(self_intro)},/生命周期函数--监听页面加载/onLoad:function(options){},})

版权声明

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

产品经理

手机 : 13312967497

擅长 : 小程序流量变现

扫码领取礼包

热门模板

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