Question

我正在使用 PHP HTML 和一点 JS 开发预算应用程序。

我想要一个只能被用户点击一次的导入按钮，即使他们刷新页面，它也会被禁用或隐藏，但对于新用户，它仍然可用，直到他们点击它。< /p>

我尝试过这样的代码，但每次刷新后都可以再次点击。

<form action='/' method='POST' onsubmit='disableButton()'>
    <input name='txt' type='text' required />
    <button id='btn' type='submit'>Post</button>
</form>

<script>
    function disableButton() {
        var btn = document.getElementById('btn');
        btn.disabled = true;
        btn.innerText = 'Posting...'
    }
</script>

有没有办法做到这一点？

Answer 1

为此，正如其他人所说，您将需要一个后端数据库，但是，我们也可以使用 localstorage 和 cookie 来实现。您可以这样做：

<form action='/' method='POST' onsubmit='refresh()'>
    <input name='txt' type='text' required />
    <button id="refresh" type='submit'>Post</button>
</form>
<script>
  const refreshBtn = document.getElementById("refresh");
  refreshBtn.addEventListener("click", refresh);
  disable();

  function disable() {
    if (localStorage.getItem("disableButton?")) {
      refreshBtn.setAttribute("disabled", ""); 
    }
  }
  
  function refresh() {
    localStorage.setItem("disableButton?", "yes");
  };
</script>

代码说明：当您提交表单时，它会在本地存储中保存单击该按钮的信息。然后当用户回来时，它运行 disable() 来检查本地存储值是否存在，如果存在，它会禁用提交按钮。

如果这不起作用，请告诉我。

（此外，如果用户清除了他的历史记录和 cookie，那么用户将能够提交表单，因此最好使用数据库来执行此操作。）

单击每个用户后禁用按钮

1 个答案: