How to make buttons that highlight on select? [closed]

Question

Requirement: 1. Buttons options are submitted part of form action 2. Only one option is allowed at a time (like radio button) 3. There are no bullets displayed 4. The button text 'button' is highlighted to indicate that it has been selected. 5. Prefer CSS over javascript

Any suggestions on how to accomplish this?

Answer 1

This would be easy with a bit of Javascript, but CSS alone seems like it'd be tough. Suppose though that you use some JQuery...

<div id="buttongroup">
   <input type="hidden" name="buttongroup_text" id="buttongroup_text" />
   <button class="radiobutton selected">One</button>
   <button class="radiobutton">Two</button>
   <button class="radiobutton">Three</button>
</div>

You can then add the following to the 'click' event for each button...

$(document).ready(function){
    $('#buttongroup button').bind( 'click', function(){
        $('#buttongroup button').removeClass( 'selected' );
        $(this).addClass( 'selected' );
    });
}

This bit of code assigns a class to the clicked button, removing that class from the others at the time of the click.

The last bit of work you need is to intercept the form submit and fill the value in for the hidden field to the text of the selected button.

$('#myform').submit(function(){
    $('#buttongroup_text').val( $('#buttongroup button.selected').val() );
    $(this).submit();
});

That should send the text from the button in the hidden field of your choosing.