Displaying typed text

I have several text boxes on one screen. As those text boxes are being filled in by the user I need to display the values of the text boxes on a different portion of the screen without submitting the form. Is there a way to do this, and if so can you give me some guidance??? I am thinking that it will probably be done in Javascript.

Thanks to all that reply

Javascript would be the way, yes, and pretty much the only way I can think of. Basically you need to grab the textbox value and add it to a string, then add it to the innerHTML or childNode.data of the element that is to display the text.

Use += to build the string, and you have to call the function onkeyup event. It'll probably slow the typing down some, and it will break the 'undo' function in IE.

Does anyone have an example that I can relate to?

Well if you check view source on this page, you'll see a function called postLength() which is one I wrote for a feature we did away with. But it has some of the parameters in common with what this one would need to have.

Include this;

Code:

---

var theTextBox;
var theDisplay;

function doTextKeyUp(e)
{
  while (!theDisplay.hasChildNodes())
    theDisplay.appendChild(document.createTextNode(''));

  theDisplay.firstChild.data = theTextBox.value;
}

addEHandler(window, 'load', function() {
  theTextBox = document.getElementById('theTextBox');
  theDisplay = document.getElementById('theDisplay');
  addEHandler(theTextBox, 'keyup', doTextKeyUp);
});

---

HTML Code:

---

<!-- ... -->
  <input type="text" id="theTextBox">
  <span id="theDisplay"></span>
<!-- ... -->

---

Exactly what I was looking for, thanks!!

Now I have another question. With the code that penegate has posted. If I have the info for those text boxes coming in from another page, how would I go about calling the code to execute, and check the text boxes onload. If they are blank we are all set, but if we have info coming over they are automatically prepopulated.

If they're already populated when you serve the page just put the same content into the span element.