小程序 | 微信小程序from报名表单提交至数据库（含js提交函数）

效果图

index.wxml

<form bindsubmit="formSubmit" bindreset="formReset">

<!-- 报名表单 开发 -->
<view class="signContainer">
  <view class="infoItem">
    <text class="item-label">姓名</text>
    <input name='userName' placeholder="未填写(必填)" value="{
     
     {getUserName}}"></input>
  </view>
  <view class="infoItem">
    <text class="item-label">性别</text>
    <view class="item-nav">
      <picker name="userGender" bindchange="bindUserGenderChange" value="{
     
     {userGenderArray[genderIndex]}}" range="{
     
     {userGenderArray}}">{
   
   {userGenderArray[genderIndex]}}</picker>
      <image mode="widthFix" style="width:30rpx;" src="/image/shot.png"></image>
    </view>
  </view>
  <view class="infoItem">
    <text class="item-label">籍贯</text>
    <view class="item-nav">
      <picker mode="region" name="userRegion" bindchange="bindUserRegionChange" value="{
     
     {getUserRegion}}">{
   
   {getUserRegion[0]}} {
   
   {getUserRegion[1]}} {
   
   {getUserRegion[2]}}</picker>
      <image mode="widthFix" style="width:30rpx;" src="/image/shot.png"></image>
    </view>
  </view>
  <view class="infoItem">
    <text class="item-label">民族</text>
    <input name='userPeople' placeholder="未填写(必填)" value="{
     
     {getUserPeople}}"></input>
  </view>
  <view class="infoItem">
    <text class="item-label">政治面貌</text>
    <view class="item-nav">
      <picker name="userPoliticalOutlook" bindchange="bindUserPoliticalOutlook" value="{
     
     {userPoliticalOutlook[politicalOutlookIndex]}}" range="{
     
     {userPoliticalOutlook}}">{
   
   {userPoliticalOutlook[politicalOutlookIndex]}}</picker>
      <image mode="widthFix" style="width:30rpx;" src="/image/shot.png"></image>
    </view>
  </view>
</view>
<!-- 报名表单 结束 -->

<!--  -->
<view class="signContainer">
  <view class="infoItem">
    <text class="item-label">学号</text>
    <input name='userID' placeholder="未填写(必填)" value="{
     
     {getUserID}}"></input>
  </view>
  <view class="infoItem">
    <text class="item-label">班级</text>
    <view class="item-nav">
      <picker name="userClass" bindchange="bindUserClass" value="{
     
     {userClass[userClassIndex]}}" range="{
     
     {userClass}}">{
   
   {userClass[userClassIndex]}}</picker>
      <image mode="widthFix" style="width:30rpx;" src="/image/shot.png"></image>
    </view>
  </view>
  <view class="infoItem">
    <text class="item-label">寝室号</text>
    <input name='userRoomNumber' placeholder="未填写(1#101)" value="{
     
     {getUserRoomNumber}}"></input>
  </view>
</view>
<!--  -->

<!-- 联系方式 开始 -->
<view class="signContainer">
  <view class="infoItem">
    <text class="item-label">手机</text>
    <input name='userPhone' placeholder="未填写(必填)" value="{
     
     {getUserPhone}}"></input>
  </view>
  <view class="infoItem">
    <text class="item-label">微信</text>
    <input name='userWeChat' placeholder="未填写(选填)" value="{
     
     {getUserWeChat}}"></input>
  </view>
  <view class="infoItem">
    <text class="item-label">QQ</text>
    <input name='userQQ' placeholder="未填写(必填)" value="{
     
     {getUserQQ}}"></input>
  </view>
</view>
<!-- 联系方式 结束 -->

<!-- 部门意愿 开始 -->
<view class="signContainer">
  <view class="infoItem">
    <text class="item-label">第一志愿</text>
    <view class="item-nav">
      <picker name="userFirstIntention" bindchange="bindUserFirstIntention" value="{
     
     {userFirstIntention[userFirstIntentionIndex]}}" range="{
     
     {userFirstIntention}}">{
   
   {userFirstIntention[userFirstIntentionIndex]}}</picker>
      <image mode="widthFix" style="width:30rpx;" src="/image/shot.png"></image>
    </view>
  </view>
  <view class="infoItem">
    <text class="item-label">第二志愿</text>
    <view class="item-nav">
      <picker name="userSecondIntention" bindchange="bindUserSecondIntention" value="{
     
     {userSecondIntention[userSecondIntentionIndex]}}" range="{
     
     {userSecondIntention}}">{
   
   {userSecondIntention[userSecondIntentionIndex]}}</picker>
      <image mode="widthFix" style="width:30rpx;" src="/image/shot.png"></image>
    </view>
  </view>
  <view class="infoItem">
    <text class="item-label">是否调剂</text>
    <view class="item-nav">
      <picker name="userAdjust" bindchange="bindUserAdjust" value="{
     
     {userAdjustArray[adjustIndex]}}" range="{
     
     {userAdjustArray}}">{
   
   {userAdjustArray[adjustIndex]}}</picker>
      <image mode="widthFix" style="width:30rpx;" src="/image/shot.png"></image>
    </view>
  </view>
</view>
<!-- 部门意愿 结束 -->


<!-- 获奖情况 开始 -->
<view class="signContainer">
  <view class="infoItem">
    <text class="item-label">获奖情况</text>
    <view class="item-nav">
      <textarea maxlength="-1" name='userAward' placeholder="请写下你的获奖情况"></textarea>
    </view>
  </view>
</view>
<!-- 获奖情况 结束 -->

<!-- 个人简介 开始 -->
<view class="signContainer">
  <view class="infoItem">
    <text class="item-label">个人简介</text>
    <view class="item-nav">
      <textarea maxlength="-1" name='userIntroduction' placeholder="请写下个人简介"></textarea>
    </view>
  </view>
</view>
<!-- 个人简介 结束 -->

<!-- 提交按钮 开始 -->
<button class="personBtn" formType="submit">提交报名</button>
<!-- 提交按钮 结束 --> 
</form>

index.wxss

/* 班级信息 */
.signContainer {
    
    
  width: 100%;
  display: flex;
  flex-direction: column;
  align-items: center;
  background-color: white;
  margin-bottom: 20rpx;
}
.infoItem {
    
    
  width: 90%;
  /* height: 300rpx; */
  display: flex;
  align-items: center;
  /* justify-content: space-between; */
  padding: 30rpx 10rpx 30rpx 10rpx;
  border-bottom: 1rpx solid rgb(240, 240, 240);
}
.item-label {
    
    
  width: 30%;
  color: var(--themeColor);
}
.item-nav {
    
    
  width: 70%;
  display: flex;
  align-items: center;
  justify-content: space-between;
}


/* 修改按钮 */
.personBtn {
    
    
  width:100%;
  margin-top: 50rpx;
  /* position: absolute; */
  /* bottom: 0; */
  color: white;
  background-color:var(--themeColor);
}

index.js

var app = getApp();

let userName = "";
let userGender = "";
let userRegion = "";
let userPeople = "";
let userPoliticalOutlook = "";

let userID = "";
let userClass = "";
let userRoomNumber = "";

let userPhone = "";
let userWeChat = "";
let userQQ = "";

let userFirstIntention = "";
let userSecondIntention = "";
let userAdjust = "";

let userAward = "";
let userIntroduction = "";

Page({
    
    

  /**
   * 页面的初始数据
   */
  data: {
    
    
    userGenderArray:["男","女"],
    genderIndex: 0,

    userPoliticalOutlook:["中共党员","预备党员","共青团员","群众","其它"],
    politicalOutlookIndex:0,

    userClass: ["计算机II类2001班", "计算机II类2002班", "计算机II类2003班", "计算机II类2004班", "计算机II类2005班",
                "计算机II类2006班", "计算机II类2007班", "计算机II类2008班", "计算机II类2009班", "计算机II类2010班",
                "计算机II类2011班", "计算机II类2012班", "计算机II类2013班", "计算机II类2014班", "计算机II类2015班",
    ],
    userClassIndex: 0,

    userFirstIntention: ["组织部", "办公室", "新媒体中心", "活动中心", "权益中心", "社团中心"],
    userFirstIntentionIndex: 0,
    userSecondIntention: ["组织部", "办公室", "新媒体中心", "活动中心", "权益中心", "社团中心"],
    userSecondIntentionIndex: 0,

    userAdjustArray: ["是", "否"],
    adjustIndex: 0,
    
    getUserRegion: ["北京市", "北京市", "东城区"],
  },

  /**
   * 生命周期函数--监听页面加载
   */
  onLoad: function (options) {
    
    

  },
  /**
   * 选择用户性别
   */
  bindUserGenderChange: function (e) {
    
    
    console.log(e)
    console.log('picker发送选择改变，携带值为', e.detail.value)
    this.setData({
    
    
      genderIndex: e.detail.value
    })
  },
  /**
   * 选择所在地区
   */
  bindUserRegionChange: function (e) {
    
    
    console.log(e)
    console.log('picker发送选择改变，携带值为', e.detail.value)
    this.setData({
    
    
      getUserRegion: e.detail.value,
    })
  },
  /**
   * 选择政治面貌
   */
  bindUserPoliticalOutlook: function (e) {
    
    
    console.log(e)
    console.log('picker发送选择改变，携带值为', e.detail.value)
    this.setData({
    
    
      politicalOutlookIndex: e.detail.value
    })
  },
  /**
   * 选择班级
   */
  bindUserClass: function (e) {
    
    
    console.log(e)
    console.log('picker发送选择改变，携带值为', e.detail.value)
    this.setData({
    
    
      userClassIndex: e.detail.value
    })
  },
  /**
   * 选择第一志愿
   */
  bindUserFirstIntention: function (e) {
    
    
    console.log(e)
    console.log('picker发送选择改变，携带值为', e.detail.value)
    this.setData({
    
    
      userFirstIntentionIndex: e.detail.value
    })
  },
  /**
   * 选择第二志愿
   */
  bindUserSecondIntention: function (e) {
    
    
    console.log(e)
    console.log('picker发送选择改变，携带值为', e.detail.value)
    this.setData({
    
    
      userSecondIntentionIndex: e.detail.value
    })
  },
  /**
   * 选择是否调剂
   */
  bindUserAdjust: function (e) {
    
    
    console.log(e)
    console.log('picker发送选择改变，携带值为', e.detail.value)
    this.setData({
    
    
      adjustIndex: e.detail.value
    })
  },
  /**
   * 提交保存
   */
  formSubmit: function (e) {
    
    
    console.log('form发生了submit事件，携带数据为：', e.detail.value)
    console.log(e.detail.value.userName)

    userName = e.detail.value.userName;
    userGender = e.detail.value.userGender;
    userRegion = e.detail.value.userRegion;
    userPeople = e.detail.value.userPeople;
    userPoliticalOutlook = e.detail.value.userPoliticalOutlook;

    userID = e.detail.value.userID;
    userClass = e.detail.value.userClass;
    userRoomNumber = e.detail.value.userRoomNumber;

    userPhone = e.detail.value.userPhone;
    userWeChat = e.detail.value.userWeChat;
    userQQ = e.detail.value.userQQ;

    userFirstIntention = e.detail.value.userFirstIntention;
    userSecondIntention = e.detail.value.userSecondIntention;
    userAdjust = e.detail.value.userAdjust;

    userAward = e.detail.value.userAward;
    userIntroduction = e.detail.value.userIntroduction;

    /**
     * 判断用户是否提交为空列表
     */
    if (userName == "" || userPeople == "" || userID == "" || userRoomNumber == "" || userPhone == "" || userQQ == "" || userAward == "" || userIntroduction == "") {
    
    
      console.log(userName,userPeople,userID,userRoomNumber,userPhone,userQQ,userAward,userIntroduction)
      wx.showToast({
    
    
        title: '请输入完整信息！',
        icon: 'none',
        duration: 2000
      });
    } else {
    
    
      this.signUpUserInfo();

      wx.showToast({
    
    
        title: '正在提交',
        icon: 'loading',
        duration: 1000,
        success: res => {
    
    
          wx.showModal({
    
    
            title: '报名成功',
            content: '期待你的加入！',
            showCancel: false,
            success(res) {
    
    
              if (res.confirm) {
    
    
                console.log('用户点击确定')
                wx.navigateBack({
    
    
                  delta: 1,
                })
              } else if (res.cancel) {
    
    
                console.log('用户点击取消')
              }
            }
          })
        },
        fail: err => {
    
    
          console.log('保存失败', err);
        },
      })
    }
  },

  /**
   * 将个人信息保存到数据库
   */
  signUpUserInfo: function () {
    
    
    // 连接数据库环境
    const db = wx.cloud.database();
    // 选择classesDB数据库
    db.collection('classedDB').add({
    
    
      data: {
    
    
        userName : userName,
        userGender : userGender,
        userRegion : userRegion[0]+userRegion[1]+userRegion[2],
        userPeople : userPeople,
        userPoliticalOutlook : userPoliticalOutlook,

        userID : userID,
        userClass : userClass,
        userRoomNumber : userRoomNumber,

        userPhone : userPhone,
        userWeChat : userWeChat,
        userQQ : userQQ,

        userFirstIntention : userFirstIntention,
        userSecondIntention : userSecondIntention,
        userAdjust : userAdjust,

        userAward : userAward,
        userIntroduction : userIntroduction,

      },
      // 成功返回
      success: res => {
    
    
        console.log('添加成功', res._id);
      },
      fail: err => {
    
    
        console.log('添加失败', err);
      },
      complete: res => {
    
    
        console.log('添加完成', res)
      }
    })
  },
  /**
   * 用户点击右上角分享
   */
  onShareAppMessage: function () {
    
    
  }
})