0

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?

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

| improve this answer | |
0

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);
    }
});
| improve this answer | |
  • Thanks for your quick answer. I implemented this version, but when I reload the page (Chrome) the button does not have the disabled state saved unfortunately – Paranoia Feb 11 at 22:36
  • np. Does $("#buttonID").prop('disabled', true) disable the button if you run it in the devtools console? if so, does localStorage.getItem('buttonID.disabled') return anything? – Samuel Elh Feb 11 at 22:38
  • np. Does $("#buttonID").prop('disabled', true) disable the button if you run it in the devtools console? if so, does localStorage.getItem('buttonID.disabled') return anything? – Samuel Elh Feb 11 at 22:40
  • Yes, before submitting: <input type="submit" value="Submit" class="wpcf7-form-control wpcf7-submit" id="buttonID"> and after submitting <input type="submit" value="Submit" class="wpcf7-form-control wpcf7-submit" id="buttonID" **disabled**> - if I check localstorage with if("buttonID.disabled" in localStorage){ alert('yes'); } else { alert('no'); } I'll get a yes, but the disabled state is still gone :/ – Paranoia Feb 11 at 22:47
  • In your example instead of alert('yes') call disableButton(). If the element is not rendered yet then you'll have to wait, using timeout or mutation observers. Calling $("#buttonID").length will tell you if the button is rendered at the time of the script call. – Samuel Elh Feb 11 at 22:50

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service, privacy policy and cookie policy

Not the answer you're looking for? Browse other questions tagged or ask your own question.