zoukankan      html  css  js  c++  java
  • 百度小程序-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 为按钮开关状态控制器,防止恶意点击提交空数据!

  • 相关阅读:
    关于推荐的一个算法工程师访谈,有一些内容值得看看
    Element.Event
    复数输出
    Passenger/Nginx/Debian快速部署Rails
    POJ3678【错误总会让自己有收获的】
    android在其他线程中访问UI线程的方法
    C++运算符重载的方法
    Struts2图片文件上传,判断图片格式和图片大小
    list view Item 里面有ImageButton
    用python实现远程复制 (scp + expect )
  • 原文地址:https://www.cnblogs.com/suni1024/p/10955316.html
Copyright © 2011-2022 走看看