Change Button Color On-click And Remains Same For Rest Of The Time?

here is the thing I'm trying to make my button change colour so that user can see that he already clicked on the button. and even if he refreshes the page, the button will remain i

Solution 1:

Try this:

http://jsfiddle.net/wmy8vucb/

You can make a use of localStorage and jQuery to achieve this.

simple code:

///APPLY A CSS TO THE BUTTON WHEN ITS CLICKED//////

    $( "#someid" ).click(function() {

    $(this).addClass('myclass');

    localStorage.setItem('clicked', '1');

    });



    ////YOU MIGHT WANT TO PUT THIS IN A DOCUMENT READY FUNCTION////

    if(localStorage.getItem("clicked") != null){

    $("#someid").addClass('myclass');


    }

EDIT:

Based on your comments below, you already have some CSS styling on your button. so to make sure that the new CSS/colour is applied to your button when its clicked, all you have to do is this:

.myclass{
  background-color:green !important;
}

Take a note of:

 !important;

Second Edit:

The code in the last jsfiddle you've provided works fine if you make sure to change the button's ID:

Basically, your button's ID is myBtn but you are not using that ID in the jQuery code. so either change that ID to the same ID that is used in the jQuery code or simply change the ID that is used in the jQuery code to myBtn.

working example:

http://jsfiddle.net/wmy8vucb/6/

Solution 2:

It totally depends on how permanent you want the clicked colour to be. Considering your case you could use cookies, cache or localStorage but the data in any of these can be deleted by the user or if the user uses some other system to log in and click on the button the clicked colour may not be available, therefore the best solution for this problem could be to store it in database so each time the user logs in, the clicked button's colour would be changed permanently.

If you still want to do it with the localStorage, here's a link to help you along: https://developer.mozilla.org/en-US/docs/Web/API/Storage

Solution 3:

This works to change the color and remember it, even if you refresh with F5.

<button id="ikk" class="btn btn-default btn-lg myBtn" style="background: #ef332d; color: #fff;" type="button" onclick="btnColorChange(0);" data-uid="UZqTjJnRVdGQjQ">Procced </button>

<script>
    btnColorChange(1);

    function btnColorChange(start)
    {
        if (start)
        {   
            index=document.cookie.search("btnColor");

            if (index != -1)
                btnColor=document.cookie.substr(index+9);
            else
                btnColor="#ef332d";
        }
        else
            btnColor='green';

        btnId = document.getElementById("ikk");
        btnId.style["background"] = btnColor;

        document.cookie = "btnColor="+btnColor;
    }
</script>

If you want, you can put in some logic to change with every click to the next color. For this you have to change the line btnColor='green' with your favorit code.

Solution 4:

this works for me http://jsfiddle.net/wmy8vucb/6/

$( "#myBtn" ).click(function() {

$(this).addClass('myclass');

localStorage.setItem('clicked', '1');

});



if(localStorage.getItem("clicked") != null){

$("#myBtn").addClass('myclass');


}

.myclass{
  background-color:green !important;
}

<button id="myBtn" class="btn btn-default btn-lg myBtn" style="background: #ef332d; color: #fff;" type="button" data-uid="IeUtIMnV0V1JpQlU">Procced</button>