PHP Solution to my problem

JavaScript and client side scripting.

Moderator: General Moderators

Post Reply
tommy1987
Forum Commoner
Posts: 92
Joined: Tue Feb 21, 2006 8:35 pm

PHP Solution to my problem

Post by tommy1987 »

I have a page where users can enter text, I want to update another point of the page with a 'realtime' preview of this text. I know PHP will be useful but I will also need javascript or something to trigger the timer event to make it appear realtime. Also for people with a lot more experience than me at web design, could anyone tell me if my solution would be better suited to DHTML or something like that? I am new to anything other than PHP and a little Javascript so if anyone knows of any good resources or code to help me along..

Thanks very much, Tom
User avatar
Luke
The Ninja Space Mod
Posts: 6424
Joined: Fri Aug 05, 2005 1:53 pm
Location: Paradise, CA

Post by Luke »

Something like this?

Code: Select all

<div id="change_box"></div>
<input type="text" name="text" onchange="updateText('change_box', this)">

Code: Select all

function updateText(updateBox, formElement){
    var box = document.getElementById(updateBox);
    box.innerHTML = formElement.value;
}
tommy1987
Forum Commoner
Posts: 92
Joined: Tue Feb 21, 2006 8:35 pm

Post by tommy1987 »

I have the following but it doesnt work, could anyone point me in the right direction?

At present you have to click outside the box for it to update, I want it so that it seems realtime

Code: Select all

<html>
	<head>
	<script type="text/javascript">
t=setTimeout("updateText('change_box', document.form.text)",200);
	</script>		
		<style>
		</style>
	</head>
	<body>

<div id="change_box"></div>

<form name="form">
<input type="text" name="text" onchange="updateText('change_box', this)">
</form>
<script type="text/javascript">


function updateText(updateBox, formElement){
    var box = document.getElementById(updateBox);
    box.innerHTML = formElement.value;
}
</script>
	</body>
</html>
User avatar
Ollie Saunders
DevNet Master
Posts: 3179
Joined: Tue May 24, 2005 6:01 pm
Location: UK

Post by Ollie Saunders »

Code: Select all

t=setTimeout("updateText('change_box', document.form.text)",200); 
becomes

Code: Select all

var timeout;
window.onload = function() {
    timeout = setTimeout("updateText('change_box', document.form.text)", 200);
}
Post Reply