百度小程序-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仅支持在 ...
随机推荐
- Gym 100917M Matrix, The
题目链接: http://codeforces.com/gym/100917/problem/M --------------------------------------------------- ...
- 【vue系列之一】使用vue-cli脚手架工具搭建vue-webpack项目
最近更新了webpack配置详解,可移步vue-cli webpack详解 对于Vue.js来说,如果你想要快速开始,那么只需要在你的html中引入一个<script>标签,加上CDN的地 ...
- linux crontab 执行任务(7秒执行)
创建的contab 文件中,每一行都代表一项任务,每行的每个字段代表一项设置.前五个字段是时间,第六个字段是要执行的命令 minute hour day month week co ...
- pandas dataframe 一行变多行 (query pv统计term pv)
关键字: 用jieba切词 用expand 一列变多列 用stack 列转行 用group by + aggr 相同term的pv求和 上效果: query pv 今日新鲜事 今日头条 北京天气 上海 ...
- Rsync+inotify搭建使用
## Rsync搭建 ### 1.1 环境准备 ``` Rsync-Server 192.168.1.174 Client-Rsync 192.168.1.173 服务启动用户都是root,客户端的用 ...
- 排序算法二:归并排序(Merge sort)
归并排序(Merge sort)用到了分治思想,即分-治-合三步,算法平均时间复杂度是O(nlgn). (一)算法实现 private void merge_sort(int[] array, int ...
- Pikachu漏洞练习平台实验——RCE(五)
1.概述 RCE(Remote Command/Code Execute) 给攻击者向后台服务器远程注入操作系统命令或者代码,从而控制后台系统. 远程系统命令执行一般出现这种漏洞,是因为应用系统从设计 ...
- JavaScript Tre
function BinarySearchTree() { var Node = function(key) { this.key = key; this.left = null; this.righ ...
- css中word-break、word-wrap和white-space的区别
css中word-break.word-wrap和white-space的区别 :https://baijiahao.baidu.com/s?id=1578623236521030997&wf ...
- stl(优先队列操作)
http://codeforces.com/gym/101911/problem/C Recently Monocarp has created his own mini-laboratory! Th ...