Home  >  Q&A  >  body text

javascript - 请问当表单按钮是a标签的时候,如何防止前端表单重复提交

我的需求是;当用户点击按钮提交表单时;防止用户多次点击按钮向后台提交重复内容;

巴扎黑巴扎黑2719 days ago478

reply all(5)I'll reply

  • 伊谢尔伦

    伊谢尔伦2017-04-11 09:11:50

    var flag = false;
    检测表单内容是否有改变且符合要求;
    有 flag = true;
    <a>.onclick = function(){
        if(flag){
        //提交请求
        flag = false
        }else{
        //您已提交
        }
        //取消a的默认行文
        return false
    }

    reply
    0
  • ringa_lee

    ringa_lee2017-04-11 09:11:50

    e.preventDefault 然后手动ajax并上锁

    reply
    0
  • 阿神

    阿神2017-04-11 09:11:50

    <!DOCTYPE html>
    <html lang="en">
    
    <head>
        <meta charset="UTF-8">
        <title>Document</title>
    </head>
    
    <body>
        <a id="once">只能点一次</a>
    </body>
    
    </html>
    <script>
    (function() {
    
        //第一次默认为true
        var boo = true;
        document.getElementById('once').onclick = function() {
        
            //判断是否能点击
            if(boo) {
            
                //点了之后改成false
                alert('第一次成功');
                boo = false;
            } else {
                alert('不能在点了')
            }
        }
    })()
    </script>

    reply
    0
  • 伊谢尔伦

    伊谢尔伦2017-04-11 09:11:50

    提交完之后来个提示框,然后刷新页面或者跳转!

    reply
    0
  • PHP中文网

    PHP中文网2017-04-11 09:11:50

    与是不是 a标签 没有关系,

    如果你的表单是原生表单提交,需要后台配合利用token(顺便做了csrf防范)来做处理。

    如果是ajax提交时,可以设一个变量,根据变量的值来检测,是否可以提交表单

    var canSubmit = true;
    $form.on('submit', function() {
      if (canSubmit === false) return;
      canSubmit = false;
      $.ajax(……   function(res){
        canSubmit = true;
      });
    });

    reply
    0
  • Cancelreply