JSFiddle - React, Tailwind, and code Playground

by ninty9notout

HTML

<form action="/UpdateStatus/12345" method="post" class="TrafficLightForm">
    <label class="red">
        <input type="radio" class="radio" name="Status" value="Red">
        Red
    </label>
    <label class="amber">
        <input type="radio" class="radio" name="Status" value="Amber">
        Amber
    </label>
    <label class="green">
        <input type="radio" class="radio" name="Status" value="Green">
        Green
    </label>
    <button type="submit" class="button">Update</button>
</form>

CSS

.TrafficLightForm label {
    width: 16px;
    height: 16px;
    margin-right: 2px;
    float: left;
    text-indent: -9999px;
    cursor: pointer;
    background: url('../images/traffic-light-mask.png') center center no-repeat;
    border-radius: 16px;
}

.TrafficLightForm label .radio {
    position: absolute;
    clip: rect(1px 1px 1px 1px);
    clip: rect(1px, 1px, 1px, 1px);
}

.TrafficLightForm .button {
    display: none;
}

.TrafficLightForm .red {
    background-color: #e2322c;
}

.TrafficLightForm .amber {
    background-color: #f08234;
}

.TrafficLightForm .green {
    background-color: #84ba3b;
}

JavaScript

(function($) {
    $(document).ready(function() {
        $('.TrafficLightForm .radio').bind($.browser.msie ? "propertychange" : "change", function() {
            var
                formAction = $(this).parents('form').attr("action"),
                newStatus = $(this).parents('form').find(".radio:checked").val();
            $.ajax({
                url: formAction,
                data: { 'Status': newStatus },
                type: "POST",
                success: function(data) {
                    // Finish
                },
                error: function(data) {
                    alert("There was an error processing your request. Please try again later.");
                }
            });
        });
    });
})(jQuery);