微信小程序云开发表单使用 name的形式提交后如何清空输入内容

      您能在阅读量那么多的文章中翻到这篇，说明您的问题还没有得到解决。请看内容。

js方获得前端页面wxml表单中的内容，有多种方法。一种是 name的方式，一种是value的方式。两种方式传值其他博客都可以搜索到，我在简答说明一下。

name传值

wxml：

<input  name='name'></input>

js

let {name} = e.detail.value

通过以上的方式可以获得name的传值

 

value传值

wxml:

<input value="{{name}}"></input>

js

写自己的提交方法，在方法中给进行setData赋值

add：function() {

this.setData({

name:e.value.name

}）

}

现在想要使用name传值，又可以清空内容

我就把两种合并了一下

wxmld 的代码

<view class='message-page'>
  <form bindsubmit="formSubmit" >
    <view>
      <text>主题:</text>
      <input value="{{name}}" name='name'></input>
    </view>

    <view>
      <text>联系方式:</text>
      <input value='{{phone}}' name='phone'></input>
    </view>
    
    <view>
      <text>内容:</text>
      <textarea class='content' value="{{content}}" name="content"></textarea>
    </view>
    <button formType="submit">提交</button>
  </form>
</view>

 

var time = require('../../../utils/util.js');
Page({
  /**
   * 页面的初始数据
   */
  data: {
    name:'', 
    phone:'', 
    content:''
  },

  /**
   * 生命周期函数--监听页面加载
   */
  onLoad: function (options) {
  },
  formSubmit:function(e) {
    let { name,phone, content } = e.detail.value;
    console.log(e.detail)
    var that = this;
    this.setData({
      name, 
      phone, 
      content
    })
    
    if (typeof (name) == "undefined" || typeof (phone) == "undefined" || typeof (content) == "undefined" ) {
      // 提示
      this.prompt("提交失败,提交内容有空");
      // 清空
      this.empty();
    } else {
      wx.cloud.callFunction({
        name: 'message',
        data: {
          name,
          phone,
          content,
          data: time.formatTime(new Date(), 'h:m')
        }
      }).then(res => {
        // 清空
        this.empty();
        if (res.errMsg.search('ok') != -1) {
          this.prompt("提交成功");
        }
      })
    }
  },

  // 清空函数
  empty:function() {
    this.setData({
      name: '',
      phone: '',
      content: ''
    })
  },


  // 提示函数
  prompt:function(e) {
    wx.showModal({
      title: '提示消息',
      content: e,
    })
  }
  
})

 

不多解释，如果有错误，可以加我qq：1832251531联系，其他问题，可以评论区留言。感谢您的到来。