Page 1 of 1

PHP Solution to my problem

Posted: Sun Oct 29, 2006 5:17 pm
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

Posted: Sun Oct 29, 2006 5:37 pm
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;
}

Posted: Sun Oct 29, 2006 5:54 pm
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>

Posted: Sun Oct 29, 2006 6:16 pm
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);
}