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

时间:2024-03-16 10:40:01

前言:微信小程序中很多地方运用到了表单,很多时候我们需要把表单中的内容提取出来返回给后台,这里我随便写了一点

注意点:

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) {
},

})