Click me

I used to be hidden!

JavaScript does the magic behind the scenes. The way you accomplish this is by putting your two text fields into divs. I’ll set the first one to be visible, then when you click on it, I will hide the first and show the second in its place. I use the style.display feature of JavaScript to change whether or not it is visible or shown. Let’s take a look at the JavaScript:

<script type="text/javascript">

function toggle_text(shown, hidden) {
       var e = document.getElementById(shown);
       var f = document.getElementById(hidden);
    if(e.style.display == 'inline') {
			e.style.display = 'none';
			f.style.display = 'inline';
	}
	else {
			e.style.display = 'inline';
			f.style.display = 'none';
	}
}
</script>

I’m simply passing in the two divs to the JavaScript function, then JavaScript checks whether or not the first div (the shown div) is visible or not. If it is visible, it hides it and shows the hidden one. The opposite happens if it isn’t visible. Note that using inline will display your text on the same line. If we wanted it to be on its own line, we could just use block instead.

Now you just need to insert the divs into the body of the page. Here is the code used from the sample above:

<div id="shown_first" style="display:inline">
	<a style="cursor:pointer" onclick="toggle_text('shown_first', 'hidden_first')">
	Click me
	</a>
</div>
<div id="hidden_first" style="display:none">
	<a style="cursor:pointer" onclick="toggle_text('shown_first', 'hidden_first')">
	I used to be hidden!
	</a>
</div>

Related posts:

1. Show Forms When Radio Button is Clicked
2. How to Reset a Form Using Javascript
3. Search and Replace a Custom Field in WordPress using PHPMyAdmin

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.

Related posts:

1. How to Reset a Form Using Javascript
2. Replace Text on Click Using JavaScript
3. Display the Contents of a File Using PHP

<form>
<input type="button" onclick="document.forms[0].reset()" value="Reset This Form">
</form>

It doesn’t clear the data, it just resets all form values to their original value. Here’s a demo:

Related posts:

1. Show Forms When Radio Button is Clicked
2. Replace Text on Click Using JavaScript
3. How to Add Uploaded Media to WP-DownloadManager