Subscribe to PostsI’ve been playing around with usability a bit of late, and trying to make forms as fool-proof as possible.
There are quite a few techniques that I’ve developed which I’ll be posting on here, but we have start somewhere, and I thought I’d pick an easy one for you to digest.
So, here goes. The scenario is you have a choice of radio buttons, each of which performs it own action, eg displaying different options to the user.
The following script can be adapted to make it easy for your users to see which option they are working with.
But first, click here for a demo of the script in action!
Whilst I’m the first to admit that the HTML in the page isn’t perfect (you shouldn’t use tables for forms!) the demo has only been thrown up as a quick proof of concept.
Firstly, the script is fairly straightforward and looks like:
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 | function highlightThis() { // GET THE RADIO BUTTON STATUS var paypal = document.getElementById('paypal'); var bacs = document.getElementById('bacs'); var cheque = document.getElementById('cheque'); // GET THE OPTION BLOCKS var paypal_options = document.getElementById('paypal_options').style; var bacs_options = document.getElementById('bacs_options').style; var cheque_options = document.getElementById('cheque_options').style; // PREPARE THE INNER HTML FOR OVER-WRITING var paypal_text = document.getElementById('paypal_text'); var bacs_text = document.getElementById('bacs_text'); var cheque_text = document.getElementById('cheque_text'); // TOGGLE HIGHLIGHTED OPTION if (paypal.checked==true) { paypal_text.innerHTML = "<span class=\"checked\"><label for=\"paypal\">PayPal</label></span>"; paypal_options.display = "block"; } else { paypal_text.innerHTML = "<label for=\"paypal\">PayPal</label>"; paypal_options.display = "none"; } if (bacs.checked==true) { bacs_text.innerHTML = "<span class=\"checked\"><label for=\"bacs\">BACS Transfer</label></span>"; bacs_options.display = "block"; } else { bacs_text.innerHTML = "<label for="\"bacs\">BACS Transfer</label>"; bacs_options.display = "none"; } if (cheque.checked==true) { cheque_text.innerHTML = "<span class=\"checked\"><label for=\"cheque\">Cheque</label></span>"; cheque_options.display = "block"; } else { cheque_text.innerHTML = "<label for=\"cheque\">Cheque</label>"; cheque_options.display = "none"; } } |
We then have the HTML itself:
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 | <table width="100%"> <tbody> <tr> <td style="padding-right: 20px;">Preferred Payment Method:</td> <td><input id="paypal" onclick="highlightThis()" onkeypress="highlightThis()" checked="checked" name="preferred" type="radio" value="0" /></td> <td style="padding-right: 20px;" width="60"> <div id="paypal_text"><span class="checked"><label for="paypal">PayPal</label></span></div></td> <td><input id="bacs" onclick="highlightThis()" onkeypress="highlightThis()" name="preferred" type="radio" value="1" /></td> <td style="padding-right: 20px;" width="110"> <div id="bacs_text"><label for="bacs">BACS Transfer</label></div></td> <td><input id="cheque" onclick="highlightThis()" onkeypress="highlightThis()" name="preferred" type="radio" value="2" /></td> <td width="80"> <div id="cheque_text"><label for="cheque">Cheque</label></div></td> </tr> </tbody> </table> |
You should note that when writing new content into a div using innerHTML, you have to pass any tags that are required within the div as well as the new content, in this case, the labels, which need to wrap the text, and cannot sit outside the div tags on either side (unfortunately!).
You also have to define what you want to happen when the checkbox is selected, and we do this with a quick bit of CSS:
1 | .checked { font-weight:bold; } |
Leave a reply