百度小程序与微信小程序相似度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框内容不会清空的更多相关文章

  1. 2017-01-11小程序form表单提交

    小程序form表单提交 1.小程序相对于之前的WEB+PHP建站来说,个人理解为只是将web放到了微信端,用小程序固定的格式前前端进行布局.事件触发和数据的输送和读取,服务器端可以用任何后端语言写,但 ...

  2. 微信小程序-form表单-获取用户输入文本框的值

    微信小程序-form表单-获取用户输入文本框的值 <input name='formnickname' class="textarea" placeholder=" ...

  3. 百度小程序-接入自然搜索-API提交Url-c#开发

    开发百度小程序后,接下来,人们最想做的是让百度更多的录入自家内容.因为小程序资源被索引后,才可能在搜索结果中展现. 百度也提供了小程序的自然搜索提交入口.一共有两种方式: 第一种是用已有的H5网站资源 ...

  4. React---简单实现表单点击提交插入、删除操作

    import React,{Component,Fragment} from 'react' class App extends Component { constructor(){ super() ...

  5. 使用ajax方法实现form表单的提交(附源码)

    写在前面的话 在使用form表单的时候,一旦点击提交触发submit事件,一般会使得页面跳转,页面间的跳转等行为的控制权往往在后端,后端会控制页面的跳转及数据传递,但是在某些时候不希望页面跳转,或者说 ...

  6. 使用ajax方法实现form表单的提交

    作者:13 GitHub:https://github.com/ZHENFENG13 版权声明:本文为原创文章,未经允许不得转载. 写在前面的话 在使用form表单的时候,一旦点击提交触发submit ...

  7. JavaWeb学习总结(十一):Session解决form表单重复提交

    在平时开发中,如果网速比较慢的情况下,用户提交表单后,发现服务器半天都没有响应,那么用户可能会以为是自己没有提交表单,就会再点击提交按钮重复提交表单,我们在开发中必须防止表单重复提交. 一.表单重复提 ...

  8. form表单的提交方式

    开发中表单提交是很常见的,表单的提交方式也多种方式. 1.使用submit按钮提交表单  <input type="submit"/> <!DOCTYPE htm ...

  9. 百度小程序自定义通用toast组件

    百度小程序Toast组件 author: @TiffanysBear 百度小程序自定义通用toast组件 BdToast百度小程序自定义通用组件-github地址 需求 手百小程序的toast仅支持在 ...

随机推荐

  1. 洛谷P1462 通往奥格瑞玛的道路(二分+spfa,二分+Dijkstra)

    洛谷P1462 通往奥格瑞玛的道路 二分费用. 用血量花费建图,用单源最短路判断 \(1\) 到 \(n\) 的最短路花费是否小于 \(b\) .二分时需要不断记录合法的 \(mid\) 值. 这里建 ...

  2. Mysql 链接数据库时区错误

    错误信息:Error querying database.  Cause: java.sql.SQLException: The server time zone value 'Öйú±ê׼ʱ¼ ...

  3. leetcode 190. 颠倒二进制位(c++)

    颠倒给定的 32 位无符号整数的二进制位. 示例 1: 输入: 00000010100101000001111010011100输出: 00111001011110000010100101000000 ...

  4. DELPHI之全局变量和局部变量

    http://www.cnblogs.com/Stwo/archive/2011/07/11/2102816.html DELPHI之全局变量和局部变量 全局变量: 如果我们在应用程序一个单元中的in ...

  5. HTML --JS 选择框

    <html> <head> <title>选择框</title> <script language="JavaScript"& ...

  6. Sabotage 【UVA - 10480】【最大流割边】

    题目链接 很容易会想到是最大流建边,但是同样的这里有坑点,就是有的人去输出边的时候,去把残余网络的流为0的边给输出了,其实不然,我们应当输出的是那些最后跑到深度为0的不能再走下去的点,只要把他们割了, ...

  7. 排序,其他的运用 os fork

    while True: str_num = input("Enter number:") flag = True dotCount = 0 if str_num[0] == '-' ...

  8. Learning OSG programing---osgAnimation(1)

    osg::AnimationPath* createAnimationPath(const osg::Vec3& center,float radius,double looptime) { ...

  9. UI自动化处理文件上传

    UI自动化处理文件上传 import win32guiimport win32con def set_uploader(self, file_path): sleep(2) self.file_pat ...

  10. Quartz-第二篇 使用quartz框架定时推送邮件

    1.定时推送邮件,也就是使用定时调度框架触发我们的发邮件动作,发邮件动作,请参考我的这篇随笔.