plugins - Hide button after form submit and save state to localstorage

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?

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?

• plugins
• jquery
• forms
• plugin-contact-form-7

Share Improve this question asked Feb 11, 2020 at 21:29 ParanoiaParanoia 2522 silver badges1111 bronze badges

Add a comment  | 

2 Answers 2

Sorted by: Reset to default 0

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');

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);
    }
});