Question

这是我的情况。我有一个提交按钮。点击后，会进行一些后端/数据库验证，如果一切顺利，请提交表单并禁用该按钮，这样表单就不能提交两次。如果它未通过验证，则无法进行提交，并且按钮保持活动状态，因此用户可以重新提交表单。这听起来很简单，但我无法使其发挥作用。这是一个C＃Web应用程序。

我试图在页面加载时将代码添加到按钮。单击提交按钮并且验证失败时，请删除禁用该按钮的代码。但这是我的问题。因为＆＃34;禁用＆＃34;代码被删除，用户修复任何错误并重新提交，因为代码不再存在，可以单击多个按钮。

我不想为此使用Ajax，因为后端检查非常复杂。还有另一种方法吗？我试图添加＆＃34;禁用＆＃34;代码on＆＃34; load＆＃34;但是当验证失败时，它在回发时不起作用。

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

感谢任何帮助。

Answer 1

尝试下面的代码段

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代码段只会禁用提交按钮，以防止过度提交;一旦页面再次加载，它将被启用。这不是我最喜欢的验证方式，但我遵循了你的逻辑。

Answer 2

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

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

并在验证之前添加此条件：

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

如果您的页面在每次提交时都会重新加载，则无需进一步添加任何内容，但是如果没有添加任何内容，则添加setInterval方法，如果验证失败，该方法将重置click变量以供下次使用。

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

停止使用Javascript双击提交按钮

2 个答案: