Javascript表单摘要页面

Question

我创建了一个包含多个函数的Javascript表单，我想在单击提交按钮后生成表单中输入的所有值的摘要页面。我的问题是如何生成此摘要页面？ （请参阅下面的代码）

由于

<script type='text/javascript'>
function formValidator(){
  // Make quick references to our fields
  var firstname = document.getElementById('firstname');
  var lastname = document.getElementById('lastname');
  var addr = document.getElementById('addr');
  var pcode = document.getElementById('pcode');
  var course = document.getElementById('course');
  var username = document.getElementById('username');
  var email = document.getElementById('email');
  // Check each input in the order that it appears in the form!
  if(isAlphabet(firstname, "Please enter only letters for your name")){
    if(isAlphanumeric(addr, "Numbers and Letters Only for Address")){
      if(isNumeric(pcode, "Please enter a valid post code")){
        if(madeSelection(course, "Please Choose a Course")){
          if(lengthRestriction(username, 6, 8)){
            if(emailValidator(email, "Please enter a valid email address")){
              return true;
            }
          }
        }
      }
    }
  }
  return false;
}

function notEmpty(elem, helperMsg){
  if(elem.value.length == 0){
    alert(helperMsg);
    elem.focus(); // set the focus to this input
    return false;
  }
  return true;
}

function isNumeric(elem, helperMsg){
  var numericExpression = /^[0-9]+$/;
  if(elem.value.match(numericExpression)){
    return true;
  }else{
    alert(helperMsg);
    elem.focus();
    return false;
  }
}

function isAlphabet(elem, helperMsg){
  var alphaExp = /^[a-zA-Z]+$/;
  if(elem.value.match(alphaExp)){
    return true;
  }else{
    alert(helperMsg);
    elem.focus();
    return false;
  }
}

function isAlphanumeric(elem, helperMsg){
  var alphaExp = /^[0-9a-zA-Z]+$/;
  if(elem.value.match(alphaExp)){
    return true;
  }else{
    alert(helperMsg);
    elem.focus();
    return false;
  }
}

function lengthRestriction(elem, min, max){
  var uInput = elem.value;
  if(uInput.length >= min && uInput.length <= max){
    return true;
  }else{
    alert("Please enter between " +min+ " and " +max+ " characters");
    elem.focus();
    return false;
  }
}

function madeSelection(elem, helperMsg){
  if(elem.value == "Please Choose a Course"){
    alert(helperMsg);
    elem.focus();
    return false;
  }else{
    return true;
  }
}

function emailValidator(elem, helperMsg){
  var emailExp = /^[\w\-\.\+]+\@[a-zA-Z0-9\.\-]+\.[a-zA-z0-9]{2,4}$/;
  if(elem.value.match(emailExp)){
    return true;
  }else{
    alert(helperMsg);
    elem.focus();
    return false;
  }
}

</script>

<form name="javaform" action="javasummary.html" method="post" onsubmit="return formValidator();">
  <label>First Name:</label> <input type='text' id='firstname' size='50'/><br />
  <label>Last Name:</label> <input type='text' id='lastname' size='50'/><br />
  <label>Address:</label> <input type='text' id='addr' size='50' /><br />
  <label>Post Code:</label> <input type='text' id='pcode' size='50'/><br />
  <label>Course:</label> <select id='course'>
  <option>Please Choose a Course</option>
  <option>PHP | £500 | 18/02/2012</option>
  <option>CSS | £400 | 03/03/2011</option>  
  <option>HTML | £550 | 04/02/2012</option>
  <option>FLASH(NEW) | £1220 | 25/12/2012</option>
</select><br />
  <label>Username(6-8 characters):</label>
  <input type='text' id='username' size='50'/><br />
  <label>Email:</label>
  <input type='text' id='email' size='50'/><br />
  <input type='submit' value='Submit'>
</form>