Category Archives: Javascript

Replace Text on Click Using JavaScript

3 Replies



This tutorial will show you how to replace text with text by using JavaScript. The text that you click will be replaced with new text. Specifically, we will use JavaScript to hide one div and show another in it’s place. Here is a demo:


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>

Show Forms When Radio Button is Clicked

2 Replies

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.