Any sort of Javascript buttons that can be clicked and unclicked and stay that way unless clicked again?

Question

Very confusing title. I just want to create a button that indicates the status of an order. If it's pressed, then the order is complete. If it's unpressed, the it's still pending.

Do you know of any plugins for this sort of functionality?

EDITS

Here is the route I have decided to take.

<div id="statuses"> <a id="first" class="status">Waiting</a>
 <a id="second" class="status">Waiting</a>
</div>
<input type="button" id="reset" value="Reset" />

Here's the JavaScript for the buttons:

var COOKIE_NAME = "selection";

function getObjectProperties(obj) {
    var keys = [];
    for (var k in obj) keys.push(k);
    return keys;
}

function deserialize() {
    $.cookie.json = true;

    //read object from cookies
    var selection = $.cookie(COOKIE_NAME);
    console.log(selection);

    if (selection !== undefined) {
        //go over each property (first, second, ...)
        $.each(getObjectProperties(selection), function (index, element) {
            //find button by id
            var $elem = $("#" + element);

            //read selection value for button
            var isSelected = selection[element];

            if (isSelected) {
                //mark button as selected
                $elem.addClass("selected").html("Ready");
            }
        });
    }
}

function serialize() {
    //initialize empty object
    var selection = {};

    //go over each button
    $(".status").each(function (index) {
        var $this = $(this);

        //add new property to object and assigning value to it ({first:false, second:true /*,....*/})
        selection[$this.attr("id")] = $this.hasClass("selected");
    });

    console.log(selection);

    //save object to cookie
    $.cookie(COOKIE_NAME, selection);
}

$(document).on("click", ".status", function (e) {
    var $this = $(this);
    $this.toggleClass("selected");

    var isSelected = $this.hasClass("selected");
    $this.html(isSelected ? "Ready" : "Waiting");
    serialize();
});

$(document).on("click", "#reset", function (e) {
    $(".status").removeClass("selected").html("Waiting");
    serialize();
});

deserialize();

I've also declared these in the head:

<script src="//ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
     <script src="//ajax.googleapis.com/ajax/libs/jqueryui/1.9.1/jquery-ui.min.js"></script>
     <link rel="stylesheet" href="http://code.jquery.com/ui/1.9.1/themes/base/jquery-ui.css" />

With this, the buttons work as planned, but they fail to stay that way after page refresh.

Just set the disabled property and the button is disabled, you don't need a plugin to do that ? — adeneo, Jan 30 '14 at 21:14
http://stackoverflow.com/questions/3014649/how-to-disable-html-button-using-javascript — Anderson Green, Jan 30 '14 at 21:15
You could use a checkbox and style it to look like a button (see eg. http://jsfiddle.net/zAFND/2/), or you can just implement a simple jquery click handler. No need to use any plugins :) What exactly are you trying to do? Can you post some code? — Moritz, Jan 30 '14 at 21:16

score 2 · Answer 1 · answered Jan 30 '14 at 21:20

2

<input type="button" id="btn" value="Click to complete">

<script type="text/javascript">
window.onload = function(){

    document.getElementById('btn').onclick = function(){
        if(this.disabled){
            return false; // already disabled; nothing to do
        }

        this.disabled = true;
        this.value = 'Order Complete';
        /* ANY OTHER FUNCTIONALITY YOU NEED */

    }

}
</script>

answered Jan 30 '14 at 21:20

Samuel Cook

16,620
7
50
62

This does exactly what I need it to do, except that the button's state resets after I refresh the page. Is there any way to fix that? – Dylan Richards Jan 30 '14 at 21:31
just using html and javascript no. you could use php to remember a session variable then automatically disable the button when the page loads if that session variable is present – Samuel Cook Jan 30 '14 at 21:34

score 1 · Answer 2 · edited Jan 31 '14 at 04:36

Simplest solution (since you are already using jQuery), is to add jQueryUI and use .buttonset():

jsFiddle Demo

HTML:

<form>
    <div id="radio">
        <input type="radio" id="radio1" name="radio"><label for="radio1">Choice 1</label>
        <input type="radio" id="radio2" name="radio" checked="checked"><label for="radio2">Choice 2</label>
        <input type="radio" id="radio3" name="radio"><label for="radio3">Choice 3</label>
    </div>
</form>

jQuery/js:

$( "#radio" ).buttonset();

To remember the button state on refresh, you can store the data on a server (e.g. using PHP $_SESSION), or store it locally using either HTML5 localstorage or cookies.

Here is a very simple solution called jquery.cookie:

http://www.sitepoint.com/eat-those-cookies-with-jquery/

Adding jQueryUI is as simple as referencing both the jQueryUI library and stylesheet (in addition to the jQuery library), like this:

<head>
    <script src="//ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
    <script src="//ajax.googleapis.com/ajax/libs/jqueryui/1.9.1/jquery-ui.min.js"></script>
    <link rel="stylesheet" href="http://code.jquery.com/ui/1.9.1/themes/base/jquery-ui.css" />
</head>

score 1 · Answer 3 · edited May 23 '17 at 12:11

You can toggle some class and change html of an element to visualize your selection

HTML:

<a id="first" class="status">Waiting</a>
<a id="second" class="status">Waiting</a>
<a id="third" class="status">Waiting</a>
<a id="fourth" class="status">Waiting</a>
<!-- as many as you need -->

CSS:

a.status {
    background-color: #ff0;
    border: 2px solid #777;
    /*visualize as you wish*/
}

a.status.selected {
    background-color: #0f0;
    border: 2px solid #ccc;
    /*visualize as you wish*/
}

JavaScript:

$(document).on("click", ".status", function (e) {
    var $this = $(this);
    $this.toggleClass("selected");

    var isSelected = $this.hasClass("selected");
    $this.html(isSelected ? "Ready" : "Waiting");
});

Here is the Demo

If you want to save selection state, you could use jquery.cookie

You have to add some JavaScript code.

First of all, you need some COOKIE_NAME variable

var COOKIE_NAME = "selection";

You need two functions.

First will save current selection to some object and write it to cookies:

function serialize() {
    //initialize empty object
    var selection = {};

    //go over each button
    $(".status").each(function (index) {
        var $this = $(this);

        //add new property to object and assigning value to it ({first:false, second:true /*,....*/})
        selection[$this.attr("id")] = $this.hasClass("selected");
    });

    //save object to cookie
    $.cookie(COOKIE_NAME, selection);
}

Second function will read selection from cookies and append it to needed buttons:

function deserialize() {
    $.cookie.json = true;

    //read object from cookies
    var selection = $.cookie(COOKIE_NAME);

    if (selection !== undefined) {
        //go over each property (first, second, ...)
        $.each(getObjectProperties(selection), function (index, element) {
            //find button by id
            var $elem = $("#" + element);

            //read selection value for button
            var isSelected = selection[element];

            if (isSelected) {
                //mark button as selected
                $elem.addClass("selected").html("Ready");
            }
        });
    }
}

getObjectProperties() function simply returns names of object's properties:

function getObjectProperties(obj) {
    var keys = [];
    for (var k in obj) keys.push(k);
    return keys;
}

$.cookie.json = true; is used for ability to save JSON objects

So, now we can extend previous code and

deserialize selection on each page load
serialize selecton after click on some button

JavaScript:

$(document).ready(function(){
    deserialize();

    $(document).on("click", ".status", function(e) {
        var $this = $(this);
        $this.toggleClass("selected");

        var isSelected = $this.hasClass("selected");
        $this.html(isSelected ? "Ready" : "Waiting");
        serialize();
    });
});

Here is the demo with state saving

Edited

You need to include jquery.cookie.js file AFTER including jquery.js. So

Download it from Github, host it where you need and include as

<script src="yourPathToScript/jquery.cookie.js"></script>

or

include it from jsDelivr CDN as

<script src="//cdn.jsdelivr.net/jquery.cookie/1.4.0/jquery.cookie.js"></script>

The first way is preferable

I'm struggling with JQuery Cookies. Everything works up to that point. Can't figure out how to install it. — Dylan Richards, Jan 31 '14 at 04:11

Any sort of Javascript buttons that can be clicked and unclicked and stay that way unless clicked again?

3 Answers3

HTML:

jQuery/js:

HTML:

CSS:

JavaScript:

Here is the Demo

JavaScript:

Here is the demo with state saving

Edited