百度小程序-form表单点击提交,input框内容不会清空
百度小程序与微信小程序相似度90%。微信小程序转换为百度小程序,部分还是需要人工修改!
做了一个form留言表单,点击提交之后,input框第一次会清空,但是第二次就不会清空了!
不多说直接上代码!
.swan文件
<view class="page">
<form bindreset="formReset">
<view class="weui-cells__title">基本信息</view>
<view class="weui-cells weui-cells_after-title">
<view class="weui-cell weui-cell_input">
<view class="weui-cell__hd">
<view class="weui-label">姓名:</view>
</view>
<view class="weui-cell__bd">
<input name="name" class="weui-input" placeholder="请输入你的姓名" type="text" bindinput="getName" />
</view>
</view>
<view class="weui-cell weui-cell_input">
<view class="weui-cell__hd">
<view class="weui-label">电话:</view>
</view>
<view class="weui-cell__bd">
<input name="contact" maxlength="11" class="weui-input" placeholder="请输入联系电话" type="number" bindinput="getNumber" />
</view>
</view>
<view class="weui-cell weui-cell_input">
<view class="weui-cell__hd">
<view class="weui-label">邮箱:</view>
</view>
<view class="weui-cell__bd">
<input name="email" class="weui-input" placeholder="请输入电子邮箱" type="text" bindinput="getEmail" />
</view>
</view>
<view class="weui-cell weui-cell_input">
<view class="weui-cell__hd">
<view class="weui-label">地址:</view>
</view>
<view class="weui-cell__bd">
<input name="addr" class="weui-input" placeholder="请输入地址信息" type="text" bindinput="getAddress" />
</view>
</view>
</view>
<view class="weui-cells__title">留言内容</view>
<view class="weui-cells weui-cells_after-title">
<view class="weui-cell">
<view class="weui-cell__bd">
<textarea name="message" class="weui-textarea" placeholder="请输入留言内容" style="min-height: 3.3em" bindinput="getMessage" />
</view>
</view>
</view>
<view class="weui-btn-area">
<button class="weui-btn" type="primary" disabled="{{falg}}" style="background:#3CA700" form-type="reset">提交</button>
</view>
</view>
</form>
<!-- 底部版权 S-->
<copyright></copyright>
<!-- 底部版权 E-->
</view>
.js文件
const app = getApp();
Page({
data: {
formDataList: { userName: "", mobileNumber: "", Email: "", Address: "", Message: "" },
falg: true,
},
onLoad: function () {
// 监听页面加载的生命周期函数
},
onReady: function () {
// 监听页面初次渲染完成的生命周期函数
},
onShow: function () {
// 监听页面显示的生命周期函数
app.setInfo();
},
onHide: function () {
// 监听页面隐藏的生命周期函数
},
onUnload: function () {
// 监听页面卸载的生命周期函数
},
onPullDownRefresh: function () {
// 监听用户下拉动作
},
onReachBottom: function () {
// 页面上拉触底事件的处理函数
},
onShareAppMessage: function () {
// 用户点击右上角转发
},
getName: function (e) {
// console.log(e);
this.setData({
'formDataList.userName': e.detail.value,
});
this.falg(); },
getNumber: function (e) {
// console.log(e);
this.setData({
'formDataList.mobileNumber': e.detail.value, })
this.falg();
},
getEmail: function (e) {
// console.log(e);
this.setData({
'formDataList.Email': e.detail.value,
})
},
getAddress: function (e) {
// console.log(e);
this.setData({
'formDataList.Address': e.detail.value,
})
},
getMessage: function (e) {
// console.log(e);
this.setData({
'formDataList.Message': e.detail.value,
})
},
formReset: function (e) {
var that = this;
// console.log(this.data.formDataList)
// console.log('哦豁,form表单被reset了');
swan.request({
url: app.globalData.baseUrl + 'Index/Message',
method: 'get',
data: {
name: that.data.formDataList.userName,
contact: that.data.formDataList.mobileNumber,
email: that.data.formDataList.Email,
message: that.data.formDataList.Message,
addr: that.data.formDataList.Address
},
header: {
genToken: app.globalData.genToken
},
success: function (res) {
if (res.data.status = 1) {//留言成功
swan.showToast({
title: '留言成功',
icon: 'success',
duration: 1000,
});
}
},
fail: function (err) {
swan.showToast({
title: '失败咯!',
duration: 1000,
});
},
complete: function (res) {
that.setData({
falg: true
});
}
});
},
falg: function () {
var name = this.data.formDataList.userName;
var number = this.data.formDataList.mobileNumber;
if (name && number) {
this.setData({
falg: false
})
} else {
this.setData({
falg: true
})
}
} });
利用input输入框监听事件,获取到输入的内容,存储起来,同时button按钮,这里是reset,清空表单内容的同时,存储起来数据并且发送数据到后台!
falg 为按钮开关状态控制器,防止恶意点击提交空数据!
百度小程序-form表单点击提交,input框内容不会清空的更多相关文章
- 2017-01-11小程序form表单提交
小程序form表单提交 1.小程序相对于之前的WEB+PHP建站来说,个人理解为只是将web放到了微信端,用小程序固定的格式前前端进行布局.事件触发和数据的输送和读取,服务器端可以用任何后端语言写,但 ...
- 微信小程序-form表单-获取用户输入文本框的值
微信小程序-form表单-获取用户输入文本框的值 <input name='formnickname' class="textarea" placeholder=" ...
- 百度小程序-接入自然搜索-API提交Url-c#开发
开发百度小程序后,接下来,人们最想做的是让百度更多的录入自家内容.因为小程序资源被索引后,才可能在搜索结果中展现. 百度也提供了小程序的自然搜索提交入口.一共有两种方式: 第一种是用已有的H5网站资源 ...
- React---简单实现表单点击提交插入、删除操作
import React,{Component,Fragment} from 'react' class App extends Component { constructor(){ super() ...
- 使用ajax方法实现form表单的提交(附源码)
写在前面的话 在使用form表单的时候,一旦点击提交触发submit事件,一般会使得页面跳转,页面间的跳转等行为的控制权往往在后端,后端会控制页面的跳转及数据传递,但是在某些时候不希望页面跳转,或者说 ...
- 使用ajax方法实现form表单的提交
作者:13 GitHub:https://github.com/ZHENFENG13 版权声明:本文为原创文章,未经允许不得转载. 写在前面的话 在使用form表单的时候,一旦点击提交触发submit ...
- JavaWeb学习总结(十一):Session解决form表单重复提交
在平时开发中,如果网速比较慢的情况下,用户提交表单后,发现服务器半天都没有响应,那么用户可能会以为是自己没有提交表单,就会再点击提交按钮重复提交表单,我们在开发中必须防止表单重复提交. 一.表单重复提 ...
- form表单的提交方式
开发中表单提交是很常见的,表单的提交方式也多种方式. 1.使用submit按钮提交表单 <input type="submit"/> <!DOCTYPE htm ...
- 百度小程序自定义通用toast组件
百度小程序Toast组件 author: @TiffanysBear 百度小程序自定义通用toast组件 BdToast百度小程序自定义通用组件-github地址 需求 手百小程序的toast仅支持在 ...
随机推荐
- ceph-性能调优
Ceph 参数性能调优https://blog.csdn.net/changtao381/article/details/49907115这篇文章对我的环境有较大帮助 ceph优化记录 ceph.co ...
- 安装mysql数据库-centos7
mysql官网下载地址:https://dev.mysql.com/downloads/mysql/ 参考安装:https://blog.51cto.com/snowlai/2140451?sourc ...
- UCenter 与 DIscuz 通信失败的解决方法
问题状况:Discuz 用户无法成功修改头像且帖子中上传的图片无法保存.进入 Discuz 后台检查,一切正常:进入 UCenter 检查后发现在"应用管理"中与 Discuz 论 ...
- ECG 项目预研
1. 数据的采集 智能安全帽,流数据,鉴于数据量大,应该是采集到云平台上,然后在云平台上对数据处理,是一种典型的物联网+大数据应用场景,考虑使用AWS或者阿里云,然后搭建Hadoop/Spark 环境 ...
- OSPF多区域配置;骨干区域与非骨干区域;ABR边界路由器;LSA和SPF算法
SPF:链路状态路由算法.基本用于OSPF中,但是要求路由器路由数据库足够大,因为链路状态信息包括很多内容,这也是一个缺点. OSPF是一种内部网关协议(IGP) OSPF路由协议是一种典型的链路状态 ...
- 爬虫(十一)—— XPath总结
目录 XPath总结 一.何为XPath 二.XPath语法 1.语法 2.实例 三.XPath轴 1.XPath轴语法 2.XPath轴实例 四.XPath运算符 XPath总结 一.何为XPath ...
- Codeforces 1080C 题解(思维+二维前缀和)
题面 传送门 题目大意: 有一个黑白的棋盘,现在将棋盘上的一个子矩形全部染成黑色,另一个子矩形全部染成白色 求染完色后黑,白格子的总数 分析 我们可以发现,对于一个(1,1)到(x,y)的矩形,若xy ...
- codeforces 448CPainting Fence
版权声明:本文为博主原创文章,未经博主同意不得转载. https://blog.csdn.net/y990041769/article/details/37935237 题目:codeforces 4 ...
- k8s常用笔记
安装docker // 安装docker $ yum install -y docker-ce // 开机启动 && 启动服务 $ systemctl enable docker &a ...
- 纯css实现星级评分效果
效果 效果图如下,纯css实现超酷炫的星级评分动画效果 实现思路 5个类型为radio的input,label标签修改样式背景图为星星 label标签给每个星星鼠标停留时加注名字 点击星星有放大旋 ...