Question

I have a form, and I want to dynamically display certain elements of the form as soon as they are filled out.

Imagine if I had a text input for your name. As you type, I also want your name to appear in a different part of the webpage.

How would I accomplish this in the simplest manner?

Answer 1

(See below for an update, I realized later I’d completely forgotten to handle pasting text into the field using a mouse action.)

You can hook the keypress event (you’ll probably want keydown and keyup as well) on the text input field and use it to trigger an update of a DOM element elsewhere. For instance:

var nameField = document.getElementById('nameField');
nameField.onkeydown = updateNameDisplay;
nameField.onkeyup = updateNameDisplay;
nameField.onkeypress = updateNameDisplay;
function updateNameDisplay() {
    document.getElementById('nameDisplay').innerHTML = this.value || "??";
}

Live example

That’s a very basic example using a DOM0-style event handler (the “onXyz” property, which I don’t normally like). The simplest way to do these things is to use a library like jQuery, Prototype, YUI, Closure, or any of several others. They’ll smooth over browser differences for you and let you focus on what you’re actually trying to do.

Here’s the above using jQuery:

$('#nameField').bind('keydown keyup keypress', function() {
    $('#nameDisplay').html(this.value || "??");
});

Live example

---

Update: Actually, the above will miss things like pasting into the field using the mouse. You’d think a change handler would be good for this, but it doesn’t necessarily fire until focus leaves the field, so it’s not uncommon to use a timed process like this:

JavaScript, no library:

var nameField = document.getElementById('nameField');
var lastNameValue = undefined;

updateNameDisplay();

setInterval(updateNameDisplay, 100);

function updateNameDisplay() {
  var thisValue = nameField.value || "??";
  if (lastNameValue != thisValue) {
    document.getElementById('nameDisplay').innerHTML = lastNameValue = thisValue;
  }
}

Live example

You’ll want to avoid having a separate one of these for each field (instead, use a single timer for all of them) and you’ll want to adjust the timer according to what you actually need — be sensitive to the fact that when you’re doing this, you’re consuming resources. If you’ll want to stop the check at some stage (and it’s a good idea), save the return value from setInterval:

var timerHandle = setInterval(updateNameDisplay, 100);

…and stop the loop like this:

clearInterval(timerHandle);
timerHandle = 0;

---

Here’s a more complete example of dynamically watching fields, only using the timer when a field has focus. I’ve used jQuery for this example because it simplifies it and you did ask for simple (if you use another library or don’t use any library, you can probably port this easily enough; the main place jQuery is useful in this case is in finding the inputs within the form):

jQuery(function($) {
  var formTimer = 0,
      currentField,
      lastValue;

  updateWatchingIndicator();
  $('#theForm :input')
    .focus(startWatching)
    .blur(stopWatching)
    .keypress(updateCurrentField);

  function startWatching() {
    stopWatching();
    currentField = this;
    lastValue = undefined;
    formTimer = setInterval(updateCurrentField, 100);
    updateWatchingIndicator();
  }

  function stopWatching() {
    if (formTimer != 0) {
      clearInterval(formTimer);
      formTimer = 0;
    }
    currentField = undefined;
    lastValue = undefined;
    updateWatchingIndicator();
  }

  function updateCurrentField() {
    var thisValue;

    if (currentField && currentField.name) {
      thisValue = currentField.value || "??";
      if (thisValue != lastValue) {
        lastValue = thisValue;
        $('#' + currentField.name + 'Display').html(thisValue);
      }
    }
  }

  function updateWatchingIndicator() {
    var msg;

    if (currentField) {
      msg = "(Watching, field = " + currentField.name + ")";
    }
    else {
      msg = "(Not watching)";
    }
    $('#watchingIndicator').html(msg);
  }

});​

Live example