Question : Need assistance with creating a webpage with reconfirmation logic

I need a plain html page that contain a form element with 4 text fields txt1, txt2 (are displayed) & txt3,txt4 (are hidden) with corresponding 4 Labels and 2 buttons titled "Confirm" & "Submit". User will enter values in txt1 and txt2 fields & clicks on "Confirm" button,

Steps explained below happen after CONFIRM button is clicked....
> Values in txt1 and txt2 are stored in local javascript (var_txt1, var_txt2)variables and the values in both txt1 and txt2 fields are replaced with "*******" value
> Disable txt1,txt2 text boxes so that user cannot reenter.
> Now display the txt3,txt4 text boxes with labels so that user can reconfirm the data that they previously entered.

User now clicks on the Submit button, steps below happen when SUBMIT button is clicked.
> javascript code checks if the values in var_txt1 and txt3.value match as well as values in var_txt2 and txt4.value MATCH, if one of them does not match then a error popup is generated asking user to reenter .. all values are cleared and user needs to start from the beginning.

THIS IS WHAT I NEED, I AM NEW TO JAAVSCRIPT. Any help is appreciated. given a layout for your reference

Enter Text1: TXT1 Enter Text2: TXT2 [CONFIRM] [SUBMIT]

Reenter text: TXT3 Reenter text: TXT4 >>this line is hidden by default and appears after confirm button is clicked

Answer : Need assistance with creating a webpage with reconfirmation logic

Use this version instead, forgot to re-enable the original text inputs on fail.

                       
         
           
             1:
2:
3:
4:
5:
6:
7:
8:
9:
10:
11:
12:
13:
14:
15:
16:
17:
18:
19:
20:
21:
22:
23:
24:
25:
26:
27:
28:
29:
30:
31:
32:
33:
34:
35:
36:
37:
38:
39:
40:
41:
42:
43:
44:
45:
46:
47:
48:
49:
50:
51:
52:
53:
54:
55:
56:
57:
58:
59:
60:
61:
62:
63:
64:
65:
66:

           
           
             <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" lang="en" xml:lang="en">
 <head>
  <title></title>
  <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
  <style type="text/css">
  #err{display:none;width:500px;text-align:center;padding:10px;margin:5px;border:1px solid #ff0000;}
  #step2{display:none;}
  #submit{display:none;}
  </style>
  <script type="text/javascript">
  /* <![CDATA[ */
  var getel = function(el){return document.getElementById(el);}
  function conf(){
      getel('txt1_h').value = getel('txt1').value;
      getel('txt2_h').value = getel('txt2').value;
      getel('txt1').value = "******";
      getel('txt1').readOnly = 'readonly';
      getel('txt2').value = "******";
      getel('txt2').readOnly = 'readonly';
      getel('step2').style.display = 'block';
      getel('confirm').style.display = 'none';
      getel('submit').style.display = 'block';
  }
 
  function finalize(){
      if(getel('txt3').value == getel('txt1_h').value && getel('txt4').value == getel('txt2_h').value){
          return true;
      }else{
          getel('err').style.display = 'block'
          getel('txt1').readOnly = '';
          getel('txt2').readOnly = '';
          getel('txt1').value = getel('txt2').value = getel('txt1_h').value = getel('txt2_h').value = getel('txt3').value = getel('txt4').value = '';
          getel('step2').style.display = 'none';
          getel('confirm').style.display = 'block';
          getel('submit').style.display = 'none';
          return false;
      }
  }
  /* ]]> */
  </script>  
 </head>
<body>
 <form action="" method="get" onsubmit="return finalize();">
  <div>
   <div id="err">The entered values did not match, please re-enter.</div>
   <div id="step1">
    <label for="txt1">Enter Text1:</label>
    <input id="txt1" name="txt1" type="text" />
    <input id="txt1_h" name="txt1_h" type="hidden" />
    <label for="txt2">Enter Text2:</label>
    <input id="txt2" name="txt2" type="text" />
    <input id="txt2_h" name="txt2_h" type="hidden" />
   </div>
   <div id="step2">
    <label for="txt3">Reenter Text1</label>
    <input id="txt3" name="txt3" type="text" />
    <label for="txt4">Reenter Text2</label>
    <input id="txt4" name="txt4" type="text" />
   </div>
   <input id="confirm" onclick="conf();" type="button" value="Confirm" />
   <input id="submit" type="submit" value="Submit" />
  </div>
 </form>
</body>
</html>

           
         