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.

Code:

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

Explanation:
 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.

Demo:

Male Female