停止用Javascript双击提交按钮

Stop double-clicking of submit button with Javascript

本文关键字：提交 按钮 双击 Javascript      更新时间：2023-09-26

我的情况是这样的。我有一个提交按钮。点击后端/数据库验证，如果一切正常，提交表单并禁用按钮，这样表单就不会被提交两次。如果它没有通过验证，则不能进行提交，并且按钮保持活动状态，因此用户可以重新提交表单。这听起来很简单，但我做不到。这是一个c# web应用程序

我已经尝试在页面加载时将代码添加到按钮。单击提交按钮后，如果验证失败，则删除禁用该按钮的代码。但我的问题是。由于"禁用"代码被删除，用户修复任何错误并重新提交，由于代码不再存在，可以多次点击该按钮。

我不想使用Ajax，因为后端检查非常复杂。还有别的办法吗?我试过在"加载"上添加"禁用"代码，但当验证失败时，它不能在post上工作。

 if (window.addEventListener)
        window.addEventListener("load", lockSubmit, false);
    else if (window.attachEvent)
        window.attachEvent("onload", lockSubmit);
    else window.onload = lockSubmit;

试试下面的代码片段

window.onload = function(){
  // Insert the following function somewhere in your .js file / section
  (function prevent_over_submitting(){
    var form = document.forms.theform;
    if(form || form.nodeName == 'FORM'){
      form.onsubmit = function(){
        form.submit.value = 'Proccesing...';
        form.submit.disabled = true;
      };
    }
  })();
};

而你的表单看起来应该是这样的

<form id="theform" method="post" action="">
    <input type="text" name="firsname" value="" />
    <input type="text" name="lastname" value="" />  
    <input type="submit" name="submit" value="submit" />  
</form>

这是一个工作的jsBin，所以你可以随意使用。

更新:

上面

代码段背后的逻辑
// server-side code (rather in pseudo-code this time)
if(form_has_been_submitted){               // check if the form has been submitted
    errors[] = validate_data(post_data);   // call the method to validate data
    if(errors_array_is_empty){             // if everything is fine
        submit_data();                     // submit data
        redirect_or_do_something;          // (maybe) do other things           
    }                                      // otherwise don't do anything
}
// validation method
validate_data(post){ // the only argument here represents all your form data
    error = array;
    if(post['firstname'] == wrong){  // check for error 
        error['firstname'] = 'Check your firsname'; // if you found one, push it to the error array
    }
    if(post['lastname'] == wrong){   // the same as in previous case
        error['lastname'] = 'Check your lastname'; // the same as in previous case
    }
    return error; // return that array, it might be full or empty
}
// client-side code
<!DOCTYPE html>
<html>
<head>
  <meta charset="utf-8">
  <title>MyApplication</title>
  <script type="text/javascript">
      // the JavaScript snippet from above 
  </script>
</head>
<body>
    <form id="theform" method="post" action="">
        <input type="text" name="firsname" value="" />
        <!-- show the error if you found one, otherwise show an empty string -->
        <span><% (error['firstname'] ? error['firstname'] : "") %></span>
        <input type="text" name="lastname" value="" />
        <!-- same as in the previous case -->
        <span><% (error['lastname'] ? error['lastname'] : "") %></span>
        <input type="submit" name="submit" value="submit" />  
    </form>
</body>
</html>

正如你所看到的，上面的JavaScript片段只禁用提交按钮onclick来防止过度提交;一旦页面再次加载，它将被启用。这不是我最喜欢的验证方式，但我遵循了你的逻辑。

您可以在onclick函数中添加以下代码:

首先，添加一个全局javascript变量，如var click = false;

，并在验证发生前添加以下条件:

if(click){
    return false
} else {
    your normal validation code
}

如果你的页面在每次提交时都重新加载，那么就不需要再添加任何东西了，但是如果没有，那么就添加setInterval方法，如果验证失败，它将重置click变量以供下次使用。

在第一次点击后，click变量的状态将保持为true，并将进一步停止多次点击，除非页面重新加载或我们通过代码手动重置该变量。

相关文章：