百度小程序-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仅支持在 ...
随机推荐
- C# 高性能 TCP 服务的多种实现方式Cowboy.Sockets
本篇文章的主旨是使用 .NET/C# 实现 TCP 高性能服务的不同方式,包括但不限于如下内容: APM 方式,即 Asynchronous Programming Model TAP 方式,即 ...
- 获取系统的documents路径
获取路径 https://superuser.com/questions/1132288/windows-command-prompt-get-relocated-users-documents-fo ...
- JAVA中short和short相加自动转化为int
精度小于int的数值运算的时候都回被自动转换为int后进行计算 所以,下面的代码会报编译错误 short s1 = 1;short s2 = 1;s1= (s1+s2); 必须改成: short s1 ...
- pve之命令
pvesr list ha-manager status pvecm nodes pvecm status pveperf qm list root@cu-pve06:~# pvesr list Jo ...
- 测开之路六十:接口测试平台之common目录
实现接口测试平台使用jsonpath进行取值来断言,效果: 访问页面: 调试功能:http://www.kuaidi100.com/query 保存功能 触发执行功能 查看报告功能 目录结构 comm ...
- JS正则表达式校验金额
//任意正整数,正小数(小数位不超过2位) var isNum=/^(([1-9][0-9]*)|(([0]\.\d{1,2}|[1-9][0-9]*\.\d{1,2})))$/; var num = ...
- python 爬虫之requests爬取页面图片的url,并将图片下载到本地
大家好我叫hardy 需求:爬取某个页面,并把该页面的图片下载到本地 思考: img标签一个有多少种类型的src值?四种:1.以http开头的网络链接.2.以“//”开头网络地址.3.以“/”开头绝对 ...
- maven基础--IDEA集成
创建项目 构建项目 查找依赖 依赖范围 provided:已提供依赖范围.编译和测试有效,运行无效.如servlet-api,在项目运行时,tomcat等容器已经提供
- VScode 常用快捷键 2019
窗口操作 Ctrl + b : 显示/隐藏左侧工作区文件目录 View Appearance show Activity bar : 最左侧工具栏 显示/隐藏 Preferences ...
- [Linux] 029 脚本安装包
1. 脚本安装包 脚本安装包并不是独立的软件包类型,常见安装的是源码包 是人为把安装过程写成了自动安装的脚本,只要执行脚本,定义简单的参数,就可以完成安装 非常类似于 Windows 下软件的安装方式 ...