百度小程序-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文件

  1 const app = getApp();
  2 Page({
  3     data: {
  4         formDataList: { userName: "", mobileNumber: "", Email: "", Address: "", Message: "" },
  5         falg: true,
  6     },
  7     onLoad: function () {
  8         // 监听页面加载的生命周期函数
  9     },
 10     onReady: function () {
 11         // 监听页面初次渲染完成的生命周期函数
 12     },
 13     onShow: function () {
 14         // 监听页面显示的生命周期函数
 15         app.setInfo();
 16     },
 17     onHide: function () {
 18         // 监听页面隐藏的生命周期函数
 19     },
 20     onUnload: function () {
 21         // 监听页面卸载的生命周期函数
 22     },
 23     onPullDownRefresh: function () {
 24         // 监听用户下拉动作
 25     },
 26     onReachBottom: function () {
 27         // 页面上拉触底事件的处理函数
 28     },
 29     onShareAppMessage: function () {
 30         // 用户点击右上角转发
 31     },
 32     getName: function (e) {
 33         // console.log(e);
 34         this.setData({
 35             'formDataList.userName': e.detail.value,
 36         });
 37         this.falg();
 38 
 39     },
 40     getNumber: function (e) {
 41         // console.log(e);
 42         this.setData({
 43             'formDataList.mobileNumber': e.detail.value,
 44 
 45         })
 46         this.falg();
 47     },
 48     getEmail: function (e) {
 49         // console.log(e);
 50         this.setData({
 51             'formDataList.Email': e.detail.value,
 52         })
 53     },
 54     getAddress: function (e) {
 55         // console.log(e);
 56         this.setData({
 57             'formDataList.Address': e.detail.value,
 58         })
 59     },
 60     getMessage: function (e) {
 61         // console.log(e);
 62         this.setData({
 63             'formDataList.Message': e.detail.value,
 64         })
 65     },
 66     formReset: function (e) {
 67         var that = this;
 68         // console.log(this.data.formDataList)
 69         // console.log('哦豁,form表单被reset了');
 70         swan.request({
 71             url: app.globalData.baseUrl + 'Index/Message',
 72             method: 'get',
 73             data: {
 74                 name: that.data.formDataList.userName,
 75                 contact: that.data.formDataList.mobileNumber,
 76                 email: that.data.formDataList.Email,
 77                 message: that.data.formDataList.Message,
 78                 addr: that.data.formDataList.Address
 79             },
 80             header: {
 81                 genToken: app.globalData.genToken
 82             },
 83             success: function (res) {
 84                 if (res.data.status = 1) {//留言成功
 85                     swan.showToast({
 86                         title: '留言成功',
 87                         icon: 'success',
 88                         duration: 1000,
 89                     });
 90                 }
 91             },
 92             fail: function (err) {
 93                 swan.showToast({
 94                     title: '失败咯!',
 95                     duration: 1000,
 96                 });
 97             },
 98             complete: function (res) {
 99                 that.setData({
100                     falg: true
101                 });
102             }
103         });
104     },
105     falg: function () {
106         var name = this.data.formDataList.userName;
107         var number = this.data.formDataList.mobileNumber;
108         if (name && number) {
109             this.setData({
110                 falg: false
111             })
112         } else {
113             this.setData({
114                 falg: true
115             })
116         }
117     }
118 
119 });

利用input输入框监听事件,获取到输入的内容,存储起来,同时button按钮,这里是reset,清空表单内容的同时,存储起来数据并且发送数据到后台!

falg 为按钮开关状态控制器,防止恶意点击提交空数据!

转载于:https://www.cnblogs.com/suni1024/p/10955316.html

  • 0
    点赞
  • 1
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值