Disable submit button upon revisiting the form page-CodePudding

Hope you can understand my concern.

Is there a way a form page can detect that after you answer the form and submits, and then REVISITS the form page, the submit button is now DISABLED.

Important Note: If a different user, the form can be answered and submitted, if the SAME user visits again the link, the submit button is DISABLED.

Is this possible using HTML, CSS and 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>

CodePudding user response：

If you're trying to achieve this functionality strictly client side, you can store whether the user has submitted the form in localStorage.

For example, you can add a submit event listener to the form that sets the submitted state to true in localStorage. On page load, retrieve that state check whether the it is true, and if so, whenever the user submits the form, prevent form submission.

For example:

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 demo: https://jsfiddle.net/Spectric/dowc1qea/

Keep in mind, however, that since localStorage is modifiable by the client, they can always set the state to false programmatically and submit the form again.

CodePudding user response：

It is not possible because you either have to store cookies to do it or you have to get access to the laptop history but the user can clear the cookies and resubmit the form.

If you found this useful please mark this as answer.