重新访问表单页面时禁用提交按钮

【问题标题】：Disable submit button upon revisiting the form page重新访问表单页面时禁用提交按钮
【发布时间】：2021-11-24 13:16:09
【问题描述】：

有没有办法让表单页面检测到，在您回答表单并提交，然后REVISITS表单页面后，提交按钮现在是DISABLED？

重要提示：如果是其他用户，可以回答并提交表单，如果相同用户再次访问该链接，则提交按钮被禁用。

这可以使用 HTML、CSS 和 JavaScript 实现吗？

<form>
  <label for="fname">First name:</label><br>
  <input type="text" id="fname" name="fname" value="First Name"><br>
  <label for="lname">Last name:</label><br>
  <input type="text" id="lname" name="lname" value="Last Name"><br><br>
  <input type="submit" value="Submit">
</form>

【问题讨论】：

标签： javascript html css forms button

【解决方案1】：

如果你想在客户端实现这个功能，你可以将用户是否提交表单存储在localStorage中。

例如，您可以将submit 事件侦听器添加到在localStorage 中将提交状态设置为true 的表单。在页面加载时，检索该状态，检查它是否为真，如果是，则每当用户提交表单时，阻止表单提交。

例如：

const form = document.querySelector('form')
var isDisabled = !!localStorage.getItem('submitted');

form.addEventListener('submit', function(e){
    if(isDisabled){
    e.preventDefault();
    alert("You have already submitted")
  }
    localStorage.setItem('submitted', true);
})

JsFiddle 演示：https://jsfiddle.net/Spectric/dowc1qea/

但是请记住，由于 localStorage 可以由客户端修改，因此他们始终可以通过编程将状态设置为 false 并再次提交表单。

【讨论】：