CODEWITHSUNDEEP
javascriptphphtmlforms
Sportsmanship
Sportsmanship

Reputation: 19

How to disable submit button with Cookie/ sessions or localestorage

I know cookies/storage can be deleted but still it can prevent alot of human spammers who doesn't know about it.

How do I disable form submit button of a specific page for 1 day only?

So a code that saves "Submitted" cookies when a user submits form and if he reloads the page or enter again the browser checks if the user has "submitted" cookies If yes { button disable } Else { default button }

Note* my website has multiple form pages so I m looking for method that works for specific page only when code implemented How do I that kinda code into this

<form action="userdata.php">
  <input type="text" id="question">
  
  <input type="submit" value="Submit">
</form>

This is the last thing I need to add in my website if it's done I can finally publish my website so please do help me on this.

Upvotes: 1

Views: 568

Answers (2)

nlta
nlta

Reputation: 1914

There are three ways you could do this.

  1. Backend, this is the most reliable way if your users have accounts. This would also persist across devices.

Change how you render the form when the user has already submitted to render the input like this:

<input type="submit" value="Submit" disabled>

How you do this will depend on what your backend environment is.

  1. LocalStorage After the form is submitted store a value in the users localStorage eg:
window.localStorage.setItem('hasSubmittedForm', new Date())

When the page is loaded check for that value and disable the input if it is present

const stored = window.localStorage.getItem('hasSubmittedForm')
const storedAt = new Date(stored)
const now = new Date()
if (storedAt && ((now - storedAt)/86400) > 1) {
    // disabled
}
  1. Cookies You should probably use a library like cookies js rather than editing cookies manually. The principle is the same as #2.
Cookies.set('hasSubmittedForm', 'true')
Cookies.get('hasSubmittedForm')

Upvotes: 1

sonEtLumiere
sonEtLumiere

Reputation: 4572

Try this:

let button = document.getElementById('button');

button.addEventListener('click', () => {
    let date = new Date();
    button.disabled = true;
    localStorage.setItem('validation', JSON.stringify({date: date}));
}); 

checkStorage = () => {
    if(JSON.parse(localStorage.getItem('validation'))){
        let item = JSON.parse(localStorage.getItem('validation'));
        let storageDate = new Date(item.date)
        let actualDate = new Date();

        if(actualDate - storageDate > 8.64e+7){
            button.disabled = false;
        }
    }
}


window.load = checkStorage();

<button id="button">Submit</button>

Upvotes: 1

Related Questions