uniapp | Prevent form submission from being triggered multiple times by clicking the button multiple times

It turns out that there are really people who delete all the entertainment software on their mobile phones, regardless of anything, and study day and night, just to return to their original self with light in their eyes and hope. You must firmly believe that every thought you have about learning is the future asking you for help!

Laziness is a very strange thing. It makes you think that comfort is rest and blessing. In fact, it brings you boredom, burnout, and depression. It deprives you of hope for the future and isolates you from others. Your friendship makes you increasingly narrow-minded and doubtful about life!

1. Problem description

In uniapp, we want to implement a form submission function. After completing this function, we conducted a stress test and found that when the submit button is clicked multiple times quickly, the form will be submitted multiple times, which causes the backend to receive multiple pieces of data. Therefore, the front end needs to handle repeated clicks of a button.

2. Solution

1. Create a new common file in the root directory and create a common.js file, enter the following code

   // 防止处理多次点击
   function noMultipleClicks(methods, info) {
         
         
       // methods是点击后需要执行的函数， info是函数需要传的参数
       let that = this;
       if (that.noClick) {
         
         
           // 第一次点击
           that.noClick= false;
           if((info && info !== '') || info == 0) {
         
         
               // info是执行函数需要传的参数
               methods(info);
           } else {
         
         
               methods();
           }
           setTimeout(()=> {
         
         
               that.noClick= true;
           }, 2000)
       } else {
         
         
           //  这里是重复点击的判断
       }
   }
   
   //导出
   export default {
         
         
       noMultipleClicks,      // 禁止多次点击
   }
   

2. main.js file import

   // 配置公共方法
   import common from '@/common/common.js'
   Vue.prototype.$noMultipleClicks = common.noMultipleClicks;
   

3. Quoted in the actual page, without parameters, just pass it into a method directly.

   // 记得在data中挂载   noClick:true
   data() {
         
         
       return {
         
         
           noClick: true,
       }
   },
   
   <view class="bottom-btn-box">
       <view class="submit-btn" @click="$noMultipleClicks(formSubmit)">提交</view>
   </view>
   
   methods:{
         
         
       formSubmit(){
         
         
           //表单内容
       }           
   }
   

4. To reference in the actual page, with parameters, just pass a method and a parameter.

   // 记得在data中挂载   noClick:true
   data() {
         
         
       return {
         
         
           noClick:true,
       }
   },
   <view class="bottom-btn-box">
     <view class="formbtn" @click.stop="$noMultipleClicks(formSubmit, form)" >提交</view>
   </view>
   
   methods:{
         
         
       formSubmit(form) {
         
         
          console.log(form)
           //表单内容
       }
   }
   

3. Frequently Asked Questions

​ This method can not only be used in uniapp, but can also be used in vue to prevent multiple clicks on form submission. Just simply change the label.