Creating a group of radio buttons
Following on from the previous post is this tutorial. This one is very similar except this time we’re going to do the same trick with some radio buttons. The same principles as last time apply – we’ll read the values we want into an array and then use foreach to echo them out.
Radio buttons aren’t too much different to select boxes. Only one of the options in the group can be chosen, and only one can be preselected. Since we’ve already established the basics in the dropdown tutorial, we’ll just jump in boots and all and start rendering our output. The HTML output is slightly different – radio buttons have no containing element as the select does – they’re bound together by having a common name element.
foreach ($countries as $c)
{
echo '<input type="radio" name="country" value="'.$c['id'].'"> ';
echo $c['country'].', '.$c['capital'].'<br />';
}
Easy! The result of this script is:
<input type="radio" name="country" value="1"> New Zealand, Wellington<br /> <input type="radio" name="country" value="2"> Australia, Canberra<br /> <input type="radio" name="country" value="3"> England, London<br /> <input type="radio" name="country" value="4"> United States, Washington D.C.<br /> <input type="radio" name="country" value="5"> France, Paris<br /> <input type="radio" name="country" value="6"> Italy, Rome<br /> <input type="radio" name="country" value="7"> Malaysia, Kuala Lumpur<br />
And that displays in your browser like so:
New Zealand, Wellington Australia, Canberra England, London United States, Washington D.C. France, Paris Italy, Rome Malaysia, Kuala LumpurRegarding preselecting an option, we do the same thing as we did in the dropdown by testing the ID value of the current array element ($c) with the value of the ID passed into the script ($_GET['id']).
foreach ($countries as $c)
{
if ($c['id'] == $_GET['id'])
echo '<input type="radio" name="country" value="'.$c['id'].'"> ';
else
echo '<input checked="checked" type="radio" name="country" value="'.$c['id'].'"> ';
echo $c['country'].', '.$c['capital'].'<br />';
}
Done! The source for this is available right here.
GuruBob | 
October 12, 2008 9:09 pm
3 Comments
Other Links to this Post
RSS feed for comments on this post. TrackBack URI
Subscribe
By
Ray, August 8, 2009 @ 8:32 am
Nice neat tutorial, it would be nice if I could select radio by clicking the text.
By
GuruBob, February 17, 2010 @ 11:28 pm
Sure can …
By
GuruBob, February 17, 2010 @ 11:29 pm
urgh …
<input type=”radio” name=”country” value=”1″ id=”option1″><label for=”option1″>New Zealand, Wellington</label>