SO48046098

<!DOCTYPE html>
<html>

<head>
  <style>
    #main {
      display: flex;
      justify-content: space-around;
      flex-wrap: nowrap;
    }
    
    iframe {
      display: inline-table;
      max-width: 40%;
      height: 100vh
    }
    
    #app0 {
      max-width: 60%;
      margin: 0 0 5px 15px;
    }
    
    label {
      display: inline-block
    }
    /* Area code - Central Office code */
    [type=number] {
      width: 5ch
    }
    /* The last 4 digits - Station code */
    label [type=number]:last-of-type {
      width: 6ch
    }
    
    [type=email] {
      width: 26ch
    }
    
    .hidden {
      opacity: 0
    }
    
    #msg {
      height:60px;
      overflow-x: hidden;
      overflow-y: scroll;
      border: 3px inset grey;
      padding: 10px;
      display:block;
    }
  </style>
</head>

<body>
  <main id='main'>
    <!-- On submit, form sends to a real test server
    || The target attribute value is the name of
    || iframe#display. Whenver data is tested thru
    || this server, it will send a response later.
    -->
    <form action="https://httpbin.org/post" id="app0" method="post" enctype="multipart/form-data" target='display'>

      <fieldset id='set0'>

        <label for="file0">Resume</label>
        <input type="file" id="file0" name="resume">
        <br>
        <br>

        <label for="name0">Full Name</label>
        <input type="text" id="name0" name="name">
        <br>
        <br>

        <label>Phone Number
          <input type="number" id="area0" name="phone" min='100' max='999'>
          <input type="number" id="cent0" name="phone" min='100' max='999'>
          <input type="number" id="stat0" name="phone" min='0000' max='9999'>
        </label>
        <br>
        <br>

        <label for="mail0">Email</label>
        <input type="email" id="mail0" name="mail">
        <br>
        <br>

        <label for="info0">Additional Information</label>
        <br>
        <textarea id="info0" name="info" cols='28'></textarea>
        <br>

      </fieldset>

      <fieldset id="set1">
        <button id='btn' type="button" class=''>Process</button>
        <button id='sub' type='submit' class='hidden'>Transfer</button>

      </fieldset>
      <output id="msg"></output>
    </form>

    <iframe name='display' src='about:blank' width='60%'></iframe>

  </main>
  <script>
  /* The interface used to refer to form controls
  || is called HTMLFormControlsCollection
  */// Reference the form
    var xApp = document.forms.app0;
    
    /*\\\\\\\\\\/IMPORTANT\//////////
    | This is the part that was in error
    | In order to refer to any form controls
   // of the referenced form, you must
   || collect them in an array-like object
   \*/// using the .elements proerty

    var xCon = xApp.elements;
    
    // Then from the .elements reference by id
    // A click event on a button--processForm
    // is called
    xCon.btn.onclick = processForm;

    /* This function will gather all form values
    || into an array
    || Then it stores that array in localStorage
    || Displays the data then hides the "Process"
    || button and reveals the "Transfer" button
    */
    function processForm(e) {

      var qty = xCon.length;
      var data = [];
      for (let i = 0; i < qty; i++) {

        var formControl = xCon[i].value;

        if (formControl !== null || formControl !== undefined || formControl !== "") {

          data.push(formControl);

        }
      }

      localStorage.setItem("data", JSON.stringify(data));
      var stored = JSON.parse(localStorage.getItem("data"));
      appX();

      xApp.onsubmit = appX;

      function appX(e) {
        xCon.msg.value = stored;
        xCon.btn.classList.toggle('hidden');
        xCon.sub.classList.toggle('hidden');
      }
    }
    /* Once the "Transfer" button is clicked, the
    || data is sent to the test server and the
    || test server responds back. The response is 
    || captured and displayed in the iframe to the
    || right
    */
  </script>
</body>

</html>

// Code goes here

/* Styles go here */