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>
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 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.