Show Forms When Radio Button is Clicked

I’ve been using my Javascript a bit more than usual as I’ve been writing the Google Chart Generator plugin for WordPress. Here is one that I think gives an awesome effect. You click a radio button or a checkbox and a form element shows up that wasn’t there before. This is helpful for Google Charts because datasets are only available for some types of charts. So it is easier for the user if they don’t show up unless they are needed. Here’s how it’s done:

Create a function inside your javascript tags in the head of your page. This checks to see which radio button was checked. If it is a pie chart, it shows the pie chart entry form and hides the line chart entry form. (and vice-versa) The “chart_type” gets passed in by the form (see below):

	function gcg_radio_check(chart_type) {

	if (chart_type == "p3") {
	document.getElementById("pie_chart_data").style.display = "block";
	document.getElementById("line_chart_data").style.display = "none";
	}
	if (chart_type == "lc") {
	document.getElementById("line_chart_data").style.display = "block";
	document.getElementById("pie_chart_data").style.display = "none";
	}
     }

Now we need to create our form element, and pass the chart_type value to javascript so it can decide what to do. We do this by passing “value” in the function parameter.

<form>
<input type="radio" name="gcg_charttype" onClick="gcg_radio_check(value);" value="bhs">Bar Chart<br />
<input type="radio" name="gcg_charttype" onClick="gcg_radio_check(value);" value="lc">Line Chart<br />
</form>

So if I clicked the radio button for “Bar Chart”, it passes this to javascript: gcg_radio_check(bhs)

Lastly, we need to create the form that will be displayed once we click the radio box. I set it to display:none so that it is hidden by default:

<div id="pie_chart_data" style="display:none">
	<h3>Data Points</h3>
	<table>
		<tr>
		<input type="text" size="4" name="gcg_chartdata" value=""> Data1
		<input type="text" size="6" name="gcg_data_color" value=""> Color
		<input type="text" size="10" name="gcg_labels" value=""> Label<br />
		</tr>
	</table>
</div>

Then repeat this for the line chart and any other forms you want to hide or show.