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

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

注意点：

1.所有的input textarea button全部包含在form表单元素里

2.button 必须有formType="submit" 这个属性

3.form 必须有提交事件即bindsubmit="back_houtai"

4.通过 name属性取值，name名称不可重复

图示：

wxml文件

</view>

</view>

</view>

</view>

</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) {

})

微信小程序之获取表单数据相关推荐

微信小程序表单提交php存储,微信小程序实现form表单本地储存数据
本文实例为大家分享了微信小程序实现form表单本地储存数据的具体代码,供大家参考,具体内容如下效果图: 主要利用小程序的getStorage来实现异步本地储存. 小程序目录结构如下: 新建项目前,为 ...
微信小程序的动态表单，实现房屋租赁的多租客录入
0 前言本文将介绍如何使用微信小程序编写动态表单,最终实现房屋租赁系统中多租客录入的业务. 在阅读本文前,您需要对微信小程序的开发有一个初步的了解,以便更容易的学会开发动态表单. 作者主页:Desi ...
微信小程序之获取后台动态数据表格布局display:table
微信小程序之获取后台动态数据表格布局display:table 猿来独往 2018-09-02 本文没有采用flex布局和grid布局来设置表格的,而是通过 display: table;来设置. 一 ...
微信小程序之from表单提交数据到PHP后台
主要内容:实现微信小程序与PHP后台之间的数据传递本文通过from表单提交到后台存入数据库来展现需要注意的有: 勾选代码如下: demo1.wxml <!--pages/demo1/dem ...
微信小程序开发之表单验证（WxValidate使用）
微信小程序的开发框架个人感觉大体上跟VUE是差不多的,但是他的表单组件没有自带的验证功能,因此开发小程序的表单验证时候一般有两种方法,一是自己裸写验证规则,但是需要比较扎实的正则表达式基础,一种是利用 ...
微信小程序+SpringMVC图文表单提交（包括前后端代码）
文章目录前言一.基本功能说明二.小程序前端三.SpringMVC后端总结前言本项目使用微信小程序+SpringMVC搭建.这里展示的是其中表单提交的部分(图片和文字).本文包括前后端关键 ...
微信小程序中form 表单提交和取值实例详解
2019独角兽企业重金招聘Python工程师标准>>> 我们知道,如果我们直接给 input 添加 bindinput,比如:<input bindinput="on ...
小程序获取运动步数php,微信小程序怎么获取php页面数据？
如何获取微信小程序用户openid onLaunch: function(){ var that = this var user=wx.getStorageSync('user') || {}; va ...
微信小程序开发——form表单
WeChat小程序交流(QQ群:769977169) 效果图代码示例 1.xxx.wxml <form bindsubmit='submitClick' bindreset='resetCli ...

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

微信小程序之获取表单数据相关推荐

最新文章

热门文章