Hide button after form submit and save state to localstorage

Question

I'm trying to disable a form button (contact form 7) after submitting and then save the disabled state to localstorage. This disables the button after submitting:

jQuery(document).ready(function($) {
    $("#buttonID").click(function () {
    setTimeout(function () { disableButton(); }, 100);
});

function disableButton() {
    $("#buttonID").prop('disabled', true);
    }
});

How can I save the disabled state to localstorage so it stays disable?

Answer 1

You can save an item to local storage with one line. Something like this...

localStorage.setItem("isDisabled", "true");

Then you can check for the value later by doing something like this...

if(localStorage.getItem("isDisabled")===null) {
   //
}

Or update the value from true to false ...

localStorage.setItem('isDisabled', 'false');

Answer 2

To save a key (buttonID.disabled in this example) to localstorage you can use:

localStorage.setItem('buttonID.disabled', 1)

To read that key later:

localStorage.getItem('buttonID.disabled')

Implementing that in your code:

jQuery(document).ready(function($) {
    $("#buttonID").click(function () {
    setTimeout(function () {
      disableButton();
      // persist key
      localStorage.setItem('buttonID.disabled', 1)
    }, 100);

    // disable button later based on localstorage key presence
    localStorage.getItem('buttonID.disabled') && disableButton()
});

function disableButton() {
    $("#buttonID").prop('disabled', true);
    }
});