how to change color of a button when click and always stay activated even when it reload

Question

I want to change my button color when it clicked, and i also want to keep the changes, i mean the button is activated or not even when the page is reloaded.

this is my code---

<a id="mylink" class="allow" href="#"><button class="btn btn-default btn-xs">{% trans %}Allow{% endtrans %}</button></a>

this the the script ---

<script type="text/javascript">
window.onload = function() {
  document.getElementById('mylink').onclick = function() {
    this.style.color = 'green';
  }
}
</script>

But it is not changing the color and also not showing it is active or not when reloading. Can anyone help me to solve this problem. Thanks a lot in advanced.

Do you need this to have effect during session only or even if the user closes the browser and comes back later? — noderman, Jul 21 '15 at 16:17
i need to have this even when i close the browser and come back later ... — Istiak Mahmood, Jul 21 '15 at 16:23
So use localStorage. I've provided example for sessionStorage and will update it — noderman, Jul 21 '15 at 16:24

noderman · Accepted Answer · 2015-07-22T16:02:59.403

Without storing the state on a server, you need to use sessionStorage or localStorage

SUBSTANTIAL UPDATE: I realize you are also using color while you should be using background-color. Using $(document).ready() and jquery:

<script type="text/javascript">
$( document ).ready(function() {
  if(localStorage.getItem('isCliked'){
      $('#mylink').css('background-color','green');
  }
  $('#mylink').on('click',function() {
    $('#mylink').css('background-color','green');
    // set the value upon clicking
    localStorage.setItem('isCliked', true)
  });
});

</script>

Also, since you are using Bootstrap, you could use the class manipulation from jquery

<script type="text/javascript">
$( document ).ready(function() {
  if(localStorage.getItem('isCliked'){
      $( "#mylink" ).addClass( 'btn-success' );

      $( "#mylink" ).removeClass( 'btn-default' );
  }
  $('#mylink').on('click',function() {
    $( this ).addClass( 'btn-success' );

    $( this ).removeClass( 'btn-default' );
    // set the value upon clicking
    localStorage.setItem('isCliked', true)
  });
});

</script>

Important: this solution will not work if the user changes devices, since the button state is stored locally. If you want a strong solution, you need to store the state on the server.

  $('#mylink').on('click',function() {
    <AJAX CALL TO SERVER TO STORE STATE>
  });

In such case, your initial button rendering should already take this into account (check on server before serving your <a>) -or- you will need another ajax call upon $(document).ready(). It depends on your design and requirements.

<script type="text/javascript">
$( document ).ready(function() {

  <AJAX CALL TO QUERY THE SERVER ABOUT THE BUTTON STATE>
  <RENDER BUTTON ACCORDING TO RESULTS>

  $('#mylink').on('click',function() {
   <AJAX CALL TO SERVER TO STORE STATE>
  });
});

</script>

thanks, i have tried your code, but it is not changing the color when i click and it is also not changing color when reloading the page even ... is there is anything wrong in my button code .... — Istiak Mahmood, Jul 21 '15 at 16:30
Sorry, I didn't focus on the click code, just on the issue for persistence. You seem to be using Bootsrap, so you can go the jquery way and put your code on `$( document ).ready(function() { });` at the end of the body instead of using `window.onload` -- more about this here: http://stackoverflow.com/questions/3698200/window-onload-vs-document-ready — noderman, Jul 21 '15 at 16:34
And by the way, `localStorage` is something for newer browsers -- but I suppose you are not using IE 7 :-) — noderman, Jul 21 '15 at 16:36
Please note you should use `background-color`. I've updated with more info. — noderman, Jul 21 '15 at 17:16
**Important**: this solution will not work if the user changes devices, since the button state is stored locally. If you want a strong solution, you need to store the state on the server. — noderman, Jul 22 '15 at 15:54

score 1 · Answer 2 · answered Jul 21 '15 at 16:15

1

When a webpage is reloaded previous states are forgotten by the browser until and unless you use some persistence (like local storage or something) and check saved data and restore previous stage of any element on page reload by yourself.

answered Jul 21 '15 at 16:15

Suman Barick

3,101
1
15
30

score 1 · Answer 3 · answered Jul 21 '15 at 16:15

1

you can use this for anchor tag.

a:visited { 
    background-color: yellow;
}

answered Jul 21 '15 at 16:15

abs

791
6
15

score 1 · Answer 4 · answered Jul 21 '15 at 16:17

1

If you want to change color of button you can do it using jquery, but if you want to reload page and still button color shows in updated color : in this case you need to set cookie or session values for that color and apply to the button.

answered Jul 21 '15 at 16:17

Bhavin Solanki

4,492
3
19
42

how to change color of a button when click and always stay activated even when it reload

4 Answers4