I want my div to copy my form's input

[brdnwi]

ok, I have a input type="text" and when I type in it, I want my div to follow the exact value of my input. However, my div is always one character back. So If I type "ARGH" ... my div says "ARG"

the form

<form action="" method="post">
<input id="searchtext" type="text" value="" onkeypress="autocomplete(this.value, event);">
</form>

the js function

function autocomplete(thevalue, e) {

theObject = document.getElementById("superdiv");

var key = e.which

if(key == undefined){
key = e.keyCode;  
}

theObject.innerHTML = thevalue;

}

[JimmyP]

Have you tried running it on the onkeyup event instead?
- Doing it on the onkeypress event presumably means that the last letter typed is only 'obtained' when you put the key down to type the next letter...

[brdnwi]

I tried that, but with same results. whammy!

[brdnwi]

wait, it works in FF, but not IE. IE is still one char behind.

[paul_wilkins]

Using onkeyup works in FF and IE for me.

function autocomplete(thevalue, e) {
	theObject = document.getElementById("superdiv");
	var key = e.which
	if(key == undefined){
		key = e.keyCode;  
	}
	theObject.innerHTML = thevalue;
}

That key value isn't used though, and the event doesn't need to pass the parameters. With the event attribute removed the HTML is as follows

<form action="" method="post">
    <input id="searchtext" type="text" value="">
</form>

and the script can easily add the event which gives you easy access to the this keyword. This makes the required code much much smaller.

document.getElementById('searchtext').onkeyup = function () {
	document.getElementById("superdiv").innerHTML = this.value;
}

[brdnwi]

it works now. thanks guys.

[Wolf_22]

I have to ask something here... I've tried messing around with the last suggestion provided by pmw57, and it never seemed to work. However, when I placed the functions and whatnot at the bottom PAST the calling code (not really "calling" - I'm talking about the form code), it did.

Is this something that is now a standard to do, or am I missing something here? I always knew that the common place for javascripts is supposed to be in the head and whatnot, but also heard that your website will run faster if javascripts are placed at the bottom of your markup.

[JimmyP]

If you need to put it in the head section then you have to initiate the function onload...

window.onload = function() {STUFF HERE}

[Wolf_22]

Okay, but which should be done? Putting it in the head or down towards the end of the markup?

Wouldn't placing it at the end of the markup be against the W3C standards?

[paul_wilkins]

As the W3C site says about the script element:

This element may appear any number of times in the HEAD or BODY of an HTML document.

http://www.w3.org/TR/html401/interac....html#h-18.2.1

Placing your scripts at the bottom of the body is a part of Yahoo's best practices for speeding up your web site. The reason for this is that it speeds up the rendering of the page.
http://developer.yahoo.com/performance/rules.html

With scripts in the head you can have issues with multiple onload events trying to work together. If you use advanced W3C and IE event registration techniques instead, you're limiting the browsers that it will work on.

A big bonus of placing scripts at the bottom of the body is that it greatly simplifies working with page elements because you can directly interact with the elements without waiting for onload events to kick in.

[Wolf_22]

Awesome follow-up pmw57. Much appreciated.