微信小程序云开发表单使用 name的形式提交后如何清空输入内容

您能在阅读量那么多的文章中翻到这篇，说明您的问题还没有得到解决。请看内容。

js方获得前端页面wxml表单中的内容，有多种方法。一种是 name的方式，一种是value的方式。两种方式传值其他博客都可以搜索到，我在简答说明一下。

name传值

wxml：

let {name} = e.detail.value

通过以上的方式可以获得name的传值

value传值

wxml:

写自己的提交方法，在方法中给进行setData赋值

add：function() {

this.setData({

name:e.value.name

}）

}

现在想要使用name传值，又可以清空内容

我就把两种合并了一下

wxmld 的代码

<view class='message-page'><form bindsubmit="formSubmit" ><view><text>主题:</text><input value="{{name}}" name='name'></input></view><view><text>联系方式:</text><input value='{{phone}}' name='phone'></input></view><view><text>内容:</text><textarea class='content' value="{{content}}" name="content"></textarea></view><button formType="submit">提交</button></form>
</view>

var time = require('../../../utils/util.js');
Page({/*** 页面的初始数据*/data: {name:'', phone:'', content:''},/*** 生命周期函数--监听页面加载*/onLoad: function (options) {},formSubmit:function(e) {let { name,phone, content } = e.detail.value;console.log(e.detail)var that = this;this.setData({name, phone, content})if (typeof (name) == "undefined" || typeof (phone) == "undefined" || typeof (content) == "undefined" ) {// 提示this.prompt("提交失败,提交内容有空");// 清空this.empty();} else {wx.cloud.callFunction({name: 'message',data: {name,phone,content,data: time.formatTime(new Date(), 'h:m')}}).then(res => {// 清空this.empty();if (res.errMsg.search('ok') != -1) {this.prompt("提交成功");}})}},// 清空函数empty:function() {this.setData({name: '',phone: '',content: ''})},// 提示函数prompt:function(e) {wx.showModal({title: '提示消息',content: e,})}})

不多解释，如果有错误，可以加我qq：1832251531联系，其他问题，可以评论区留言。感谢您的到来。

微信小程序云开发表单使用 name的形式提交后如何清空输入内容相关推荐

微信小程序云开发表数据一键清空
适用微信小程序云开发 1.将开发阶段表中测试数据一键清空 TemperatureReport表测试 db.collection('TemperatureReport') .where({all:nu ...
基于微信小程序云开（统计学生信息并导出excel）2.0版
前言随着移动端的不断发展,人们大部分的办公及生活应用都开始趋向于移动端.然而在2017年"微信之父"张小龙带领团队,开发了一款叫做微信小程序的东西,它的出现打破了人们认识移动端的 ...
微信小程序云开发之新闻博客社区项目debug后的项目代码
大家好,我是csdn的博主:lqj_本人这是我的个人博客主页:lqj_本人的博客_CSDN博客-微信小程序,html特效,vue2基础领域博主本次文章主要时为我最近在哔哩哔哩上的新发布的视频做一个 ...
基于微信小程序云开（统计学生信息并导出excel）
前言随着移动端的不断发展,人们大部分的办公及生活应用都开始趋向于移动端.然而在2017年"微信之父"张小龙带领团队,开发了一款叫做微信小程序的东西,它的出现打破了人们认识移动端的 ...
基于微信小程序云开（统计学生信息并导出excel）3.0版
前言随着移动端的不断发展,人们大部分的办公及生活应用都开始趋向于移动端.然而在2017年"微信之父"张小龙带领团队,开发了一款叫做微信小程序的东西,它的出现打破了人们认识移动端的 ...
基于微信小程序云开（统计学生信息并导出excel）4.0版（稳定版）
前言随着移动端的不断发展,人们大部分的办公及生活应用都开始趋向于移动端.然而在2017年"微信之父"张小龙带领团队,开发了一款叫做微信小程序的东西,它的出现打破了人们认识移动端的 ...
微信小程序云开发之cms开发
读者注意:以下内容建立在读者对小程序云开发理解与会使用情况下进行目录 1 登录cms网页后台并创建简单项目 2 内容管理cms的深入学习--创建新闻列表 2.1 前期准备 2.2 请求cms创建的新 ...
微信小程序云开发上传word文档到云存储器
微信程序直接选择上传文件时跳转手机的文件管理往往看到这样的画面这对于大部分用户是很不友好的,经常找不到用户想要上传的文档我所使用的是利用微信自带的两个api实现文件选择和上传,话不多说直接上选择文 ...
微信小程序云开发之Node部署
云函数的使用与环境配置: 1.创建云函数右键cloudfunctions文件选择新建Node.js云函数,云函数命名为updateVoice用于修改用户语音数量. 2.安装node.js及npm: ...
基于微信小程序云开发（校园许愿墙app）2.0稳定版，以发布上线
大家好~我是c站的一个小博主,我会定期更新博文,本篇是围绕微信小程序基于腾讯云开发展开的一个项目,如果看着还不错,或者对您有帮助的话,可以进我的专栏看看我的小程序的其他作品https://blog.c ...

微信小程序云开发表单使用 name的形式提交后如何清空输入内容

微信小程序云开发表单使用 name的形式提交后如何清空输入内容相关推荐

最新文章

热门文章