2

When I do a click, I assign a disabled attribute to the button:

$(".save_post").on("click", function() {
    $(this).attr("disabled", "true");
});

However, if I change page and then I go back to this one, the button should keep the disabled attribute given, this is fine if I use localStorage:

localStorage.setItem("savedArticle", "savedButton");
var myButtonState = localStorage.getItem("savedArticle", "savedButton");
$(".save_post").addClass(myButtonState);

However, I have different pages which can have <button type="button" class="save_post">SAVE</button> so each time I click on a button, a disabled attribute is given, but if I use the localStorage like above, it will add myButtonState to all buttons with class .save_post each time we land on a page with it.

I am trying to add the attribute only to the buttons really clicked.

rob.m
  • 9,843
  • 19
  • 73
  • 162
  • 2
    Use `id` instead? – BenM Mar 29 '18 at 16:40
  • @BenM mm maybe that's actually an idea, so generate a new ID each time we land on a page and save that id and then add the attribute based on that? – rob.m Mar 29 '18 at 16:42
  • 1
    How do you wish to save these states for each page? Database? Cookies? May need a more complete example. Do these buttons have an ID? – Twisty Mar 29 '18 at 16:42
  • Well if they all have to be separate than you have to set each one. How? an array of individual records in storage.... really tons of ways – epascarello Mar 29 '18 at 16:42
  • @Twisty i don't want cookie nor database, localStorage would be fine – rob.m Mar 29 '18 at 16:42
  • @rob.m No, give each `.save_post` button an `id` (that's unique, of course), and when the user clicks it, add the `id` attribute to local storage. Then just use `$('#'+buttonID).attr('disbaled', true)`. – BenM Mar 29 '18 at 16:43
  • @epascarello so basically `localStorage.setItem("savedArticle", $('myID').attr('disabled', 'true'));` – rob.m Mar 29 '18 at 16:43
  • Wouldn't it be a better behavior to set the button disabled by default and enable it only when the users make changes to the form/page/input fields? – Anthony C Mar 29 '18 at 16:44
  • @BenM and to set the localStorage value I'd do what I wrote on previous comment, right? – rob.m Mar 29 '18 at 16:44
  • @rob.m if you will use `localStorage` then I would advise you get the state of each button (and it's ID), and create an Object to store all this in and then store that object in `localStorage` for the page, or a reference to the page. This way you can unpack this when the page loads, and reset the state of each button on the page. – Twisty Mar 29 '18 at 16:46
  • @Twisty yes exactly, got it. Also the answer helped with a real example. – rob.m Mar 29 '18 at 16:47
  • @AnthonyC nope, it's a `save button`, so is enabled by default and disabled once you click on it. It's written in the question. – rob.m Mar 30 '18 at 05:52

1 Answers1

1

Just assign an ID to each .save_post element:

<button id="savePost1" class="save_post">Save Post</button>

And then reference the ID:

$('.save_post').on('click', function() {
    $(this).attr("disabled", "true");
    localStorage.setItem('saveButton', $(this).attr('id'));
});

And then call it on load:

$('#'+localStorage.getItem('saveButton')).attr('disabled', true);
BenM
  • 52,573
  • 26
  • 113
  • 168
  • superb yes, makes perfect sense. Thanks a lot. Will accept in a minute – rob.m Mar 29 '18 at 16:46
  • @rob.m The only issue is if the user is able to click multiple `.save_post` buttons. – BenM Mar 29 '18 at 16:47
  • they won't be able to as I am setting the disable attribute as soon as they click on it, so the button is disabled right after they click, not just saving the state in localStorage – rob.m Mar 29 '18 at 16:47
  • or i could simply add it as an array list and make the array unique but that's complicating for no reasons unless you remove the attribute disabled manually form the html – rob.m Mar 29 '18 at 16:52
  • actually there is a problem tho, by doing this, we are always replacing the savedId, we should add them as an array as we will add many ids as we have many pages – rob.m Mar 30 '18 at 06:14
  • Then just store a JSON array string in local storage instead, and use that. – BenM Mar 30 '18 at 07:39
  • this is how i resolved it `var curPostId = $(".my_post_id").attr("data-id"); if(localStorage.getItem("lines")) { if (lines.includes(curPostId)) { $('#_'+curPostId).attr('disabled', true); } }` – rob.m Mar 30 '18 at 07:40