求助：禁用提交按钮表单异常及防重复提交代码修复方案

Let's tackle your two form problems step by step—they're common pitfalls, so you're not alone!

Issue 1: Form won't submit when the submit button is disabled #

The root cause here is that browsers often tie form submission to the state of the submit button that triggers it. If the button is already disabled when the submission is initiated (either by clicking it or via JS), some browsers will block the submission because they consider the disabled button an invalid trigger.

Fix: #

Instead of relying on the disabled button to trigger submission, manually call the form's submit() method. This bypasses the button's state check entirely. Here's how:

<form id="myForm" action="/your-submit-url" method="post">
  <!-- Your form fields here -->
  <input type="submit" value="Submit" name="reply" id="submitBtn">
</form>

<script>
  const submitBtn = document.getElementById('submitBtn');
  const form = document.getElementById('myForm');

  submitBtn.addEventListener('click', function(e) {
    // Stop the default browser submission behavior
    e.preventDefault();
    
    // Disable the button immediately to prevent clicks
    this.disabled = true;
    this.value = 'Please Wait...';
    
    // Manually submit the form
    form.submit();
  });
</script>

Issue 2: Your current code doesn't prevent duplicate submissions (and the form still submits) #

Your existing code disables the button, but it has two key issues:

1. Browser behavior is inconsistent—some browsers will cancel the submission when you disable the button mid-click, while others will proceed (which is what you're seeing).
2. If a user clicks very quickly before the button disables, multiple submission requests could still go through.

Fix: #

We'll combine preventing the default submission, checking if the button is already disabled, and manually submitting the form to ensure consistent behavior:

<form id="myForm" action="/your-submit-url" method="post">
  <!-- Form fields -->
  <input type="submit" value="Submit" name="reply" id="submitButton">
</form>

<script>
  const submitBtn = document.getElementById('submitButton');
  const form = document.getElementById('myForm');

  submitBtn.addEventListener('click', function(e) {
    // Block default submission first
    e.preventDefault();
    
    // If button is already disabled, do nothing (prevents rapid clicks)
    if (this.disabled) return;
    
    // Disable button and update text
    this.disabled = true;
    this.value = 'Please Wait...';
    
    // Trigger form submission manually
    form.submit();
  });
</script>

Bonus: Server-Side Protection #

Frontend fixes are great, but they can be bypassed. For full protection against duplicate submissions, add server-side checks:

• Use a unique CSRF token per form submission, and invalidate it after use.
• Track recent submissions from the same user/IP and reject duplicates within a short window (e.g., 5 seconds).

内容的提问来源于stack exchange，提问作者Yaser