In this article we will learn how to copy the radio buttons groups values into a select box.

Objective: We have a radio buttons group , and create a select box with the the values from the radio buttons.


<!DOCTYPE html>
		<script src="mootools-core-1.4.5-full-compat.js"></script>
		<form id="myform">
			<input type="radio" name="mygrp" value="Male" checked="checked" /> Male
			<input type="radio" name="mygrp" value="Female"  /> Female
								<input type="button" id="addTo" value="Add" />
			<select id="target">
				<option value="">Please Add</option>
			window.addEvent('domready', function(){
				$('addTo').addEvent('click', function(event){
						$('target').add(new Element('option',{'value':values.get('value'),'html':values.get('value')}));

 At line 23 we register the click event to the addTo button, and we take each of the elements ( line 24) in the radio button group, and add a new option with the values from the each of the radio button to the target select box.

Excercise:  Do it yourself,

  1. Add a remove button, which takes away all the options from the select box.
  2. Modify the code that , determines the current selected radio button and make the corresponding selection in the select box.


Male Female