The password is copied to the hidden element onchange.
The hidden value is copied to the results element onclick of the display button.
Password >>

Result >>


A copy of the JavaScript functions in the head element:

// sample-2-watcher-functions.js
// This sample uses getElementById() to find the input areas
// The value from the password field is copied to the hidden element
// and then copied to the result element
// The technique is related to an example in Wilton and McPeak, third edition page 205

// Write the events into the text area
function write_events(event)
  {
  var area = document.getElementById("write_events_area");
  var old_message = area.value;
  area.value = old_message + "\n" + event;
  }

// reset validation function
// always returns true
function validate_reset()
  {
  return true;
  }

// display function
function display()
  {
  var hidden_area = document.getElementById("hidden_input");
  var result_area = document.getElementById("result");
  result_area.value = hidden_area.value;
  }

// Reset values onload of the body
function loaded()
  {
  var input_area = document.getElementById("change-input");
  input_area.value = "";
  var result_area = document.getElementById("result");
  result_area.value = "";
  var hidden_area = document.getElementById("hidden_input");
  hidden_area.value = "";
  }

// input change event handler
// the data in the input area is put in the result area
function changeInput()
  {
  var input_area = document.getElementById("change-input");
  var hidden_area = document.getElementById("hidden_input");
  hidden_area.value = input_area.value;
  }