js如何避免重复提交表单

<form id="myForm" action="/submit" method="POST">
  <input type="text" name="username" required>
  <button type="submit" id="submitBtn">Submit</button>
</form>

<script>
  document.getElementById('myForm').addEventListener('submit', function(event) {
    var submitBtn = document.getElementById('submitBtn');
    submitBtn.disabled = true;
    submitBtn.textContent = 'Submitting...';
  });
</script>

<form id="myForm" action="/submit" method="POST">
  <input type="hidden" name="csrfToken" value="unique_token_here">
  <input type="text" name="username" required>
  <button type="submit">Submit</button>
</form>

<script>
  // 假设unique_token_here是在服务器端生成的唯一令牌
</script>

<form id="myForm" action="/submit" method="POST">
  <input type="text" name="username" required>
  <button type="submit" id="submitBtn">Submit</button>
</form>

<script>
  var isSubmitting = false;

  document.getElementById('myForm').addEventListener('submit', function(event) {
    if (isSubmitting) return;
    isSubmitting = true;
    var submitBtn = document.getElementById('submitBtn');
    submitBtn.disabled = true;
    submitBtn.textContent = 'Submitting...';

    // 模拟异步提交
    setTimeout(function() {
      isSubmitting = false;
      submitBtn.disabled = false;
      submitBtn.textContent = 'Submit';
    }, 2000);
  });
</script>