Changing text boxes

Is it possible to have a specified text box and have the text inside the box change when the viewer clicks a link. I don’t want the viewer to go to a new page but just view new text with the one page.
I was told that it can be done in Javascript and Ajax, but I don’t know how

yes, that’s pretty simple to achieve:


<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
	"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">

<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
<head>
	<meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>

	<title>untitled</title>
	<script type="text/javascript" charset="utf-8">
		function setContent(text) {
		  document.getElementById('content').value = text;
		}
	</script>
</head>

<body>
	<a href="content.html" onclick="setContent('CONTENT'); return false;">linky linky</a>
	<input type="text" id="content" name="content" />
</body>
</html>

thanks, I’ve been playing with it, but I don’t know where I place the text within the html. When I played with it, I could write in the box within the browser, but I don’t want the viewer to write in text. I only want the viewer to read text within a box, then click a link to replace the text with new text that I’ve inputted into my html page.

Oh, right. I figure you meant a text input box.

Perhaps the simplest way to do that is just to show / hide different div’s in the page.


<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
	"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">

<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
<head>
	<meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>

	<title>untitled</title>
	<script type="text/javascript" charset="utf-8">
		function showContent(contentNumber) {
			hideAllContent();
		  document.getElementById('content-'+contentNumber).style.display = "block"
		}
		function hideAllContent() {
			for (var i=1; i<3; i++) {
				document.getElementById('content-'+i).style.display = 'none';
			}
		}
	</script>
</head>

<body>
	<a href="content1.html" onclick="showContent(1); return false;">content 1</a>
	<a href="content2.html" onclick="showContent(2); return false;">content 2</a>
	<div id="content-1">
		<p>Content 1</p>
	</div>
	<div id="content-2" style="display: none">
		<p>Content 2</p>
		<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
	</div>
</body>
</html>

Hope it helps,