微信小程序之获取表单数据
前言：微信小程序中很多地方运用到了表单，很多时候我们需要把表单中的内容提取出来返回给后台，这里我随便写了一点
注意点：
1.所有的input textarea button全部包含在form表单元素里
2.button 必须有formType=”submit” 这个属性
3.form 必须有提交事件 即bindsubmit=”back_houtai”
4.通过 name属性取值，name名称不可重复
图示：
wxml文件
<!–pages/biji/biji.wxml–>
<view class=’index_seach’>
<form bindsubmit=”back_houtai”>
<view class=’input_w professional’>
<text class=’left’>总分</text>
<view class=’input left’>
<input placeholder=’请输入总分’ cursor-spacing=’20′ name=’total_score’></input>
</view>
</view>
<view class=’input_w professional’>
<text class=’left’>专业课分</text>
<view class=’input left’>
<input placeholder=’请输入初试专业课成绩’ cursor-spacing=’20′ name=’major_score’></input>
</view>
</view>
<view class=’input_w professional’>
<text class=’left’>入学年份</text>
<view class=’input left’>
<input placeholder=’请输入入学年份 格式：2018′ cursor-spacing=’20′ name=’enroll_date’></input>
</view>
</view>
<view class=’textarea_w’>
<text class=’left’>自我介绍</text>
<view class=’textarea left’>
<textarea placeholder=’请输入一段话来介绍一下自己，说不定会更加吸引学弟学妹哦~’ cursor-spacing=’20′ name=”self_intro”></textarea>
</view>
</view>
<button class=’subClass_btn2′ formType=”submit”>确定</button>
</form>
</view>
wxss文件
/* 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_w text {
display: block;
width: 20%;
text-align: center;
/* background: red; */
}
.input_w .input {
width: 75%;
height: 70rpx;
margin-top: 10rpx;
border: 1px solid #ccc;
box-sizing: border-box;
}
.input input {
margin-top: 10rpx;
margin-left: 10rpx;
/* background: lightblue; */
}
.textarea_w {
display: block;
width: 100%;
height: 180rpx;
overflow: hidden;
}
.textarea_w text {
display: block;
width: 20%;
text-align: center;
line-height: 90rpx;
}
.textarea {
width: 75%;
height: 140rpx;
margin-top: 10rpx;
border: 1px solid #ccc;
padding: 8rpx;
/* background: lightblue; */
overflow: hidden;
}
.textarea textarea {
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.js
Page({
/**
* 页面的初始数据
*/
data: {
},
//确认按钮把数据上传后台
back_houtai: function (e) {
var that = this;
var total_score = e.detail.value.total_score; //总分
var major_score = e.detail.value.major_score; //专业分
var enroll_date = e.detail.value.enroll_date; //年份
var self_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) {
},
})
———————
作者：面壁思过程
来源：CSDN
原文：https://blog.csdn.net/candy_mi/article/details/80339142
版权声明：本文为博主原创文章，转载请附上博文链接！