微信小程序-form表单保存提交与重置

表单图如下

 

当信息填完点击保存提交时弹出提交成功

 

 重置就不多说了，点击重置即把填写的信息清空（初始化）

下面附上代码

wxml:

<form  bindreset="formReset" bindsubmit="formSubmit">
    <view class="myform1">
        <view style="display: flex;flex-wrap: wrap;">
            <view class="set">日期</view>
            <picker name="日期" mode="date" value="{{date}}" start="2000-09-01" end="2050-09-01" bindchange="bindDateChange">
                <view class="picker">
                当前选择:{{date}}
                </view>
            </picker>
        </view>
    </view>
    <view class="text">检查项目及行车记录</view>
    <view class="myform">
        <view style="display: flex;flex-wrap: wrap;">
            <view class="set">轮胎气压(备胎)</view>
            <radio-group name="轮胎气压(备胎)" bindchange="radio" class="set1">
                <radio value="正常">正常</radio>
                <radio value="异常" class="set0" color="red">异常</radio>
            </radio-group>
        </view>
        <view style="display: flex;flex-wrap: wrap;">
            <view class="set">刹车</view>
            <radio-group name="刹车" bindchange="radio" class="set2">
                <radio value="正常">正常</radio>
                <radio value="异常" class="set0" color="red">异常</radio>
            </radio-group>
        </view>
        <view style="display: flex;flex-wrap: wrap;">
            <view class="set">机油</view>
            <radio-group name="机油" bindchange="radio" class="set2">
                <radio value="正常">正常</radio>
                <radio value="异常" class="set0" color="red">异常</radio>
            </radio-group>
        </view>
        <view style="display: flex;flex-wrap: wrap;">
            <view class="set">燃油</view>
            <radio-group name="燃油" bindchange="radio" class="set2">
                <radio value="正常">正常</radio>
                <radio value="异常" class="set0" color="red">异常</radio>
            </radio-group>
        </view>
        <view style="display: flex;flex-wrap: wrap;">
            <view class="set">水</view>
            <radio-group name="水" bindchange="radio" class="set3">
                <radio value="正常">正常</radio>
                <radio value="异常" class="set0" color="red">异常</radio>
            </radio-group>
        </view>
        <view style="display: flex;flex-wrap: wrap;">
            <view class="set">刹车油、助力油</view>
            <radio-group name="刹车油、助力油" bindchange="radio" class="set5">
                <radio value="正常">正常</radio>
                <radio value="异常" class="set0" color="red">异常</radio>
            </radio-group>
        </view>
        <view style="display: flex;flex-wrap: wrap;">
            <view class="set">雨刮片</view>
            <radio-group name="雨刮片" bindchange="radio" class="set4">
                <radio value="正常">正常</radio>
                <radio value="异常" class="set0" color="red">异常</radio>
            </radio-group>
        </view>
        <view style="display: flex;flex-wrap: wrap;">
            <view class="set">灯</view>
            <radio-group name="灯" bindchange="radio" class="set3">
                <radio value="正常">正常</radio>
                <radio value="异常" class="set0" color="red">异常</radio>
            </radio-group>
        </view>
        <view style="display: flex;flex-wrap: wrap;">
            <view class="set">喇叭</view>
            <radio-group name="喇叭" bindchange="radio" class="set2">
                <radio value="正常">正常</radio>
                <radio value="异常" class="set0" color="red">异常</radio>
            </radio-group>
        </view>
    </view>
    <view class="myform1">
        <view style="display:flex ;flex-direction: row;">
            <view class="set">出车前公里数</view>
            <input name="公里数" placeholder="请输入" class="set6"></input>
        </view>
    </view>
    <view class="myform1">
        <view style="display:flex ;flex-direction: row;">
            <view class="sets" style="width: 94rpx; height: 38rpx; display: block; box-sizing: border-box">其他</view>
            <textarea name="其他" placeholder="请输入" class="set7"></textarea>
        </view>
    </view>
    <view class="myform1">
        <view style="display:flex ;flex-direction: row;">
            <view class="sets">行车记录</view>
            <textarea name="行车记录" placeholder="请输入" class="set8"></textarea>
        </view>
    </view>
    <view class="myform1">
        <view style="display:flex ;flex-direction: row;">
            <view class="set">当天行驶里程</view>
            <input name="行驶里程" placeholder="请输入" class="set6"></input>
        </view>
    </view>
    <view class="myform1">
        <view style="display:flex ;flex-direction: row;">
            <view class="set">收车时间</view>
            <picker name="收车时间"  mode="date" value="{{date1}}" start="2000-09-01" end="2050-09-01" bindchange="bindDateChange1">
                <view class="picker1">
                当前选择:{{date1}}
                </view>
            </picker>
        </view>
    </view>
    <view class="myform1">
        <view style="display:flex ;flex-direction: row;">
            <view class="set">加油数</view>
            <input name="加油数"  placeholder="请输入" class="set9"></input>
        </view>
    </view>
    <view class="myform1">
        <view style="display:flex ;flex-direction: row;">
            <view class="set">随车人员签认</view>
            <input name="签字"  placeholder="请签字" class="set6"></input>
        </view>
    </view>
    <view class="myform1">
        <view style="display:flex ;flex-direction: row;">
            <view class="set">登高车登高作业开始时间</view>
            <picker name="登高车登高作业开始时间"  mode="time" value="{{time}}" start="00:00" end="23:59" bindchange="bindTimeChange">
            <view class="picker2">
            当前选择:{{time}}
            </view>
            </picker>
        </view>
    </view>
    <view class="myform1">
        <view style="display:flex ;flex-direction: row;">
            <view class="set">登高车登高作业结束时间</view>
            <picker name="登高车登高作业结束时间" mode="time" value="{{time1}}" start="00:00" end="23:59" bindchange="bindTimeChange1">
            <view class="picker2">
            当前选择:{{time1}}
            </view>
            </picker>
        </view>
    </view>
    <view class="myform2">
        <view style="display: flex;flex-wrap: wrap;">
        <button type="warn" form-type="reset">重置</button>
        <button type="primary" form-type="submit" bindtap="showToast">保存提交</button>
        </view>
    </view>
</form>

wxss:

.text{
    text-align: center;
    font-size: 40rpx;
}
.set{
    font-size: 30rpx;
    color: rgb(2, 18, 22);
    padding: 0 0 10px 0;
    white-space: nowrap;
}
.set0{
    padding: 0 0 0 70rpx;
}
.set1{
    padding: 0 0 0 112rpx;
}
.set2{
    padding:0 0 0 250rpx;
}
.set3{
    padding:0 0 0 280rpx;
}
.set4{
    padding:0 0 0 220rpx;
}
.set5{
    padding:0 0 0 100rpx;
}
.set6{
    padding:0 0 0 238rpx;
}
.set7{
    padding:130rpx 0 0 358rpx;
    
}
.set8{
    padding:130rpx 0 0 296rpx;
}
.set9{
    padding:0 0 0 330rpx;
}
.set10{
    padding:0 0 0 90rpx;
}
.sets{
    margin-top: 130rpx;
    white-space: nowrap;
}
.set10{
    color: green;
}
.picker{
    margin-left: 300rpx;
    color: rgb(8, 82, 243);
}
.picker1{
    margin-left: 280rpx;
    color: rgb(8, 82, 243);
}
.picker2{
    margin-left: 80rpx;
    color: rgb(8, 82, 243);
}
.myform{
    margin: 1px 5px;
    border:1px solid rgb(158, 157, 157);
}
.myform1{
    margin: 10px 5px;
    border-bottom-style: solid;
    border-bottom-color:rgb(158, 157, 157);
    border-bottom-width: 1px;  
}
.myform2{
    margin-bottom: 100rpx;
    margin-top: 100rpx;
}

js:

Page({
  //初始化数据
  data:{
  date: '2000-01-01',
  date1: '2000-01-01',
  time: '00:00',
  time1: '00:00',
  allValue:'',
  },
  
  bindDateChange: function(e) {
    console.log('picker发送选择改变，携带值为', e.detail.value)
    this.setData({
      date: e.detail.value
    })
  },
  bindDateChange1: function(e) {
    console.log('picker发送选择改变，携带值为', e.detail.value)
    this.setData({
      date1: e.detail.value
    })
  },
  bindTimeChange: function(e) {
    console.log('picker发送选择改变，携带值为', e.detail.value)
    this.setData({
      time: e.detail.value
    })
  },
  bindTimeChange1: function(e) {
    console.log('picker发送选择改变，携带值为', e.detail.value)
    this.setData({
      time1: e.detail.value
    })
  },

  radio:function(e){
      console.log(e.detail.value)
  },
  formSubmit:function (e) {
    console.log('form发生了submit事件，携带数据为：',e.detail.value)
    this.setData({
      allValue:e.detail.value
    })
  },
  formReset: function(e) {undefined
    console.log('form发生了reset事件，携带数据为：', e.detail.value)
    this.setData({
      allValue:'',
      date: '2000-01-01',
      date1: '2000-01-01',
      time: '00:00',
      time1: '00:00',
    })
  },
  showToast(){
    wx.showToast({
      title: '提交成功',
      icon: 'success',
      duration: 20000//持续的时间
    })
  }

})