微信小程序-表单提交

通过表单提交数据到云数据库

//wxml文件
<form bindsubmit="bindFromsubmit">
  <view>
    <text>你的姓名</text>
    <input type="text" placeholder="请输入你的姓名" bindinput="nameinput"></input>
  </view>
  <view>
    <text>你的年龄</text>
    <input type="number" placeholder="请输入你的年龄" bindinput="ageinput"></input>
  </view>
  <view>
    <text>你的性别</text>
    <radio-group bindchange="radiochange">
      <label wx:for="{{item}}">
        <radio value="{{item.value}}" checked="{{item.checked}}" />
        {{item.value}}
      </label>
    </radio-group>
  </view>

  <button form-type="submit" type="primary">提交</button>
</form>

 

//js文件
Page({

  data: {
    item:[
      {value:'男'},
      {value:'女',checked:true}
    ],
    name:'',
    age:'',
    sex:''
  },

  nameinput:function(e){
    console.log(e.detail.value)
    this.setData({
      name:e.detail.value
    })
  },

  ageinput(e){
    console.log(e.detail.value)
    this.setData({
      age:e.detail.value
    })
  },

  radiochange(e){
    console.log(e.detail.value)
    this.setData({
      sex:e.detail.value
    })
  },

  bindFromsubmit(){
    console.log("111")
    //连接云数据库
    const db = wx.cloud.database()
    const user = db.collection("demouser")

    user.add({    //添加数据
      data:{
        name:this.data.name,
        age:this.data.age,
        sex:this.data.sex
      }
    })
    .then(res=>{
      console.log(res)
      wx.showToast({
        title: '提交成功',
        duration:2000
      })
    })
    .catch(err=>{
      console.log(err)
    })
  }

})