javascript - 要标记的下拉列表元素

Question

下面是我创建的联系表单的代码。是否可以将两个下拉列表中的选定值获取到预览页面上“位置”和“类别”字段旁边的标签？任何帮助，谢谢。

 function openNav() {
        document.getElementById("myNav").classList.remove("collapsed");
        var input = document.getElementById("txtDetail");
        var value = input.value;
        var label = document.getElementById("labelDetail");
        label.innerHTML = value;

        var input = document.getElementById("txtName");
        var value = input.value;
        var label = document.getElementById("labelName");
        label.innerHTML = value;

        var input = document.getElementById("txtNumber");
        var value = input.value;
        var label = document.getElementById("labelNumber");
        label.innerHTML = value;

        var input = document.getElementById("txtEmail");
        var value = input.value;
        var label = document.getElementById("labelEmail");
        label.innerHTML = value;

        document.getElementById("myNav").style.width = "100%";
    }
    function closeNav() {
        document.getElementById("myNav").style.width = "0%";
        document.getElementById("myNav").classList.add("collapsed");
    }

document.getElementById('file-upload').onchange = uploadOnChange;

function uploadOnChange() {
  var filename = this.value;
  var lastIndex = filename.lastIndexOf("\\");
  if (lastIndex >= 0) {
    filename = filename.substring(lastIndex + 1);
  }
  document.getElementById('filename').innerText = filename;

  var labelFile = this.value;
  var lastIndex = labelFile.lastIndexOf("\\");
  if (lastIndex >= 0) {
    labelFile = labelFile.substring(lastIndex + 1);
  }
  document.getElementById('labelFile').innerText = labelFile;
}

var div = document.getElementsByClassName('dropdown-content');

  for(var  i =0;i<div.length;i++){

  for(var  j =0;j<div[i].children.length;j++){

   div[i].children[j].addEventListener('click',function(){

     this.parentNode.previousElementSibling.innerHTML = this.innerHTML;
   })
  }
  }

 * {
      margin: 0;
      padding: 0;
      box-sizing: border-box;
      -webkit-box-sizing: border-box;
      -moz-box-sizing: border-box;
      -webkit-font-smoothing: antialiased;
      -moz-font-smoothing: antialiased;
      -o-font-smoothing: antialiased;
      font-smoothing: antialiased;
      text-rendering: optimizeLegibility;
    }

    .container {
      width: 100%;
      margin: 0 auto;
      position: relative;
    }

    #contact input[type="text"],
    #contact input[type="email"],
    #contact input[type="tel"],
    #contact textarea,
    #contact button[type="submit"] {
      font: 400 12px/16px "Verdana", Verdana;
    }

    #contact {
      background: #F9F9F9;
      padding: 25px;
      box-shadow: 0 0 20px 0 rgba(0, 0, 0, 0.2), 0 5px 5px 0 rgba(0, 0, 0, 0.24);
      height:477px;
    }

    #contact h3 {
      display: block;
      font-family:Verdana;
      font-size: 24px;
      font-weight: 300;
      margin-bottom: 10px;
    }

    #contact h4 {
      margin: 5px 0 15px;
      display: block;
      font-family:Verdana;
      font-size: 13px;
      font-weight: 400;
    }

    #contact h5 {
      text-decoration:underline;
      display: block;
      color:#4CAF50;
      font-family:Verdana;
      font-size: 19px;
      font-weight: normal;
      margin-bottom: 10px;
    }

    #contact h6 {
      text-decoration:underline;
      display: block;
      text-align:left;
      color:#4CAF50;
      font-family:Verdana;
      font-size: 15px;
      font-weight: normal;
      margin-bottom: 10px;
    }

    .fieldset {
      border: medium none !important;
      margin: 0 0 10px;
      min-width: 100%;
      padding: 0;
      width: 100%;
    }

    #contact input[type="text"],
    #contact input[type="email"],
    #contact input[type="tel"],
    #contact textarea {
      width: 100%;
      border: 1px solid #ccc;
      background: #FFF;
      margin: 0 0 5px;
      padding: 10px;
    }

    #contact input[type="text"]:hover,
    #contact input[type="email"]:hover,
    #contact input[type="tel"]:hover,
    #contact textarea:hover {
      -webkit-transition: border-color 0.3s ease-in-out;
      -moz-transition: border-color 0.3s ease-in-out;
      transition: border-color 0.3s ease-in-out;
      border: 1px solid #aaa;
    }

    #contact textarea {
      height: 100px;
      max-width: 100%;
      resize: none;
    }

    #button{
      float:right;
      cursor: pointer;
      padding: 13px 32px;
      width:125px;
      height:45px;
      border: none;
      font-family:Verdana;
      background: #4CAF50;
      color: #FFF;
      margin: 0 0 5px;
      font-size: 15px;
    }

    #button:hover{
      background: #43A047;
      -webkit-transition: background 0.3s ease-in-out;
      -moz-transition: background 0.3s ease-in-out;
      transition: background-color 0.3s ease-in-out;
    }

    #button:active {
      box-shadow: inset 0 1px 3px rgba(0, 0, 0, 0.5);
    }

    #contact input:focus,
    #contact textarea:focus {
      outline: 0;
      border: 1px solid #aaa;
    }

    ::-webkit-input-placeholder {
      color: #888;
    }

    :-moz-placeholder {
      color: #888;
    }

    ::-moz-placeholder {
      color: #888;
    }

    :-ms-input-placeholder {
      color: #888;
    }

    .dropbtn {
        background-color: #4CAF50;
        color: white;
        padding: 13px;
        font-size: 16px;
        width:125px;
        height:45px;
        border: none;
        cursor: pointer;
    }

    .dropdown {
        position: relative;
        display: inline-block;
    }

    .dropdown-content {
        display: none;
        position: absolute;
        background-color: #f9f9f9;
        min-width: 160px;
        box-shadow: 0px 8px 16px 0px rgba(0,0,0,0.2);
        z-index: 1;
    }

    .dropdown-content a {
        color: black;
        padding: 12px 16px;
        text-decoration: none;
        display: block;
    }

    .dropdown-content a:hover {background-color: #f1f1f1}

    .dropdown:hover .dropdown-content {
        display: block;
    }

    .dropdown:hover .dropbtn {
        background-color: #3e8e41;
    }
    input[type="file"]{
        display: none;
    }
    .custom-file-upload {
      cursor: pointer;
      padding: 13px 16px;
      width:125px;
      height:45px;
      border: none;
      font-family:Verdana;
      background: #4CAF50;
      color: #FFF;
      margin: 0 0 5px;
      font-size: 15px;
      display: inline-block;
      vertical-align: top;
      text-align: center;
    }
    .custom-file-upload:hover{
        background: #43A047;
      -webkit-transition: background 0.3s ease-in-out;
      -moz-transition: background 0.3s ease-in-out;
      transition: background-color 0.3s ease-in-out;
    }
    .custom-file-upload:active{
    box-shadow: inset 0 1px 3px rgba(0, 0, 0, 0.5);
    }
    .overlay {
        height: 477px;
        width: 0;
        position: fixed;
        z-index: 1;
        top: 0;
        left: 0;
        background-color: #F9F9F9;
        overflow-x: hidden;
        transition: 0.5s;
        padding-top: 25px;
        padding-bottom: 25px;
        padding-left: 25px;
        padding-right: 25px;
    }

    .overlay.collapsed {
        padding-top: 25px;
        padding-bottom: 25px;
        padding-left: 0;
        padding-right: 0;
    }

    .overlay-content {
        position: relative;
        /*top: 5%;*/
        width: 100%;
        height: 100%;
        text-align: center;
        /*margin-top: 25px;*/
    }

    .overlay-content .container {
        height: 100%;
    }

    .overlay-content fieldset:last-child {
        position: absolute;
        bottom: 0;
        margin-bottom: 0;
    }

    .overlay a {
        padding: 5px;
        margin-top:-15px;
        text-decoration: none;
        font-size: 36px;
        color: #818181;
        display: block;
        transition: 0.3s;
        z-index: 100;
    }

    .overlay a:hover, .overlay a:focus {
        color: #bababa;
    }

    .overlay .closebtn {
        position: absolute;
        top: 15px;
        right: 15px;
        font-size: 40px;
    }

    @media screen and (max-height: 450px) {
      .overlay a {font-size: 20px}
      .overlay .closebtn {
        font-size: 40px;
        top: 15px;
        right: 35px;
      }
    }
    #contact-submit{
      float:right;
      cursor: pointer;
      font-size:15px;
      padding: 13px 32px;
      width:125px;
      height:45px;
      border: none;
      font-family:Verdana;
      background: #4CAF50;
      color: #FFF;
      margin: 0 0 5px;
    }

    #contact-submit:hover{
      background: #43A047;
      -webkit-transition: background 0.3s ease-in-out;
      -moz-transition: background 0.3s ease-in-out;
      transition: background-color 0.3s ease-in-out;
    }

    #contact-submit:active {
      box-shadow: inset 0 1px 3px rgba(0, 0, 0, 0.5);
    }
    #label{
      float:left;
      text-decoration:underline;
      font-family:Verdana;
      font-size:15px;
    }
    #labelDetail{
      padding-left:15px;
      float:left;
      font-family:Verdana;
      font-size:13px;
      text-align:left;
      max-height: 135px;
      overflow: auto;
    }
    #labelName{
      padding-left:15px;
      float:left;
      font-family:Verdana;
      font-size:13px;
    }
    #labelNumber{
      padding-left:15px;
      float:left;
      font-family:Verdana;
      font-size:13px;
    }
    #labelEmail{
      padding-left:15px;
      float:left;
      font-family:Verdana;
      font-size:13px;
    }
#labelAttach{
  float:left;
  text-decoration:underline;
  font-family:Verdana;
  padding-top:12px;
  color:#4CAF50;
}
#labelFile{
  float:left;
  font-family:Verdana;
  padding-top:16px;
  font-size:10px;
  padding-left:7px;
}
#filename{
  font-family:Verdana;
  font-size:10px;
  padding-top:16px;

}

    <div class="container">  
      <form id="contact">
        <h3>Connect With HR</h3>
        <fieldset class="fieldset">
          <div class="dropdown">
            <button class="dropbtn">Location</button>
      <div class="dropdown-content">
        <a href="#">Link 1</a>
        <a href="#">Link 2</a>
        <a href="#">Link 3</a>
      </div>
    </div>

    <div class="dropdown">
      <button class="dropbtn">Category</button>
      <div class="dropdown-content">
        <a href="#">Link 1</a>
        <a href="#">Link 2</a>
        <a href="#">Link 3</a>
      </div>
    </div>
        </fieldset>
        <fieldset class="fieldset">
          <textarea id="txtDetail" placeholder="Detail...." tabindex="2"></textarea>
        </fieldset>
          <h4>Contact Information</h4>
        <fieldset class="fieldset">
            <input id="txtName" placeholder="Name" type="text" tabindex="4" >
            <input id="txtNumber" placeholder="Preferred Contact Number" type="tel" tabindex="5">
            <input id="txtEmail" placeholder="Preferred Email" type="email" tabindex="6">
        </fieldset>
        <fieldset class="fieldset">
          
          
          <label for="file-upload" class="custom-file-upload">
        <i class="fa fa-cloud-upload"></i> Attachment
    </label>
    <input id="file-upload" type="file"/>
          <p id="filename" style="display: inline-block"></p>
          
          <div id="myNav" class="overlay collapsed">
      <a href="javascript:void(0)" class="closebtn" onclick="closeNav()">&times;</a>
      <div class="overlay-content">
        <div class="container">
            <h5>Summary</h5>
              <fieldset class="fieldset">
            <label id="label">Location:</label>
            <label id="labelLocation"></label>
          </fieldset>
              <fieldset class="fieldset">
            <label id="label">Category:</label>
            <label id="labelCategory"></label>
          </fieldset>
          <fieldset class="fieldset">
            <label id="label">Detail:</label>
            <label id="labelDetail"></label>
          </fieldset>
                <h6>Contact Information</h6>
              <fieldset class="fieldset">
                <label id="label">Name:</label>
                <label id="labelName"></label>
                </fieldset>
              <fieldset class="fieldset">
                <label id="label">Preferred Contact Number:</label>
                <label id="labelNumber"></label>
                </fieldset>
              <fieldset class="fieldset">
                <label id="label">Preferred Email:</label>
                <label id="labelEmail"></label>
                </fieldset>
       <fieldset class="fieldset">
         <label id="labelAttach">Attachment:</label>
         <label id="labelFile"></label>
          <button name="submit" id="contact-submit" data-submit="...Sending">Submit</button>
        </fieldset>
        </div>
      </div>  
    </div>  
    <span id="button" onclick="openNav()">Preview</span>
          </fieldset>
      </form>
    </div>

Answer 1

配置完成后，您可以向下拉列表中添加 ID 并使用innerHTML 传递数据。检查一下，我想这就是您所要求的。我刚刚将我所说的 ID 以及后面的内容添加到您的 openNav() 函数中:

document.getElementById("labelLocation").innerHTML = 
      document.getElementById("my-category").innerHTML;

document.getElementById("labelCategory").innerHTML = 
      document.getElementById("my-location").innerHTML;

function openNav() {
       document.getElementById("labelLocation").innerHTML = document.getElementById("my-category").innerHTML;
       
       document.getElementById("labelCategory").innerHTML = document.getElementById("my-location").innerHTML;
       
       document.getElementById("myNav").classList.remove("collapsed");
        var input = document.getElementById("txtDetail");
        var value = input.value;
        var label = document.getElementById("labelDetail");
        label.innerHTML = value;

        var input = document.getElementById("txtName");
        var value = input.value;
        var label = document.getElementById("labelName");
        label.innerHTML = value;

        var input = document.getElementById("txtNumber");
        var value = input.value;
        var label = document.getElementById("labelNumber");
        label.innerHTML = value;

        var input = document.getElementById("txtEmail");
        var value = input.value;
        var label = document.getElementById("labelEmail");
        label.innerHTML = value;

        document.getElementById("myNav").style.width = "100%";
    }
    function closeNav() {
        document.getElementById("myNav").style.width = "0%";
        document.getElementById("myNav").classList.add("collapsed");
    }

document.getElementById('file-upload').onchange = uploadOnChange;

function uploadOnChange() {
  var filename = this.value;
  var lastIndex = filename.lastIndexOf("\\");
  if (lastIndex >= 0) {
    filename = filename.substring(lastIndex + 1);
  }
  document.getElementById('filename').innerText = filename;

  var labelFile = this.value;
  var lastIndex = labelFile.lastIndexOf("\\");
  if (lastIndex >= 0) {
    labelFile = labelFile.substring(lastIndex + 1);
  }
  document.getElementById('labelFile').innerText = labelFile;
}

var div = document.getElementsByClassName('dropdown-content');

  for(var  i =0;i<div.length;i++){

  for(var  j =0;j<div[i].children.length;j++){

   div[i].children[j].addEventListener('click',function(){

     this.parentNode.previousElementSibling.innerHTML = this.innerHTML;
   })
  }
  }

* {
      margin: 0;
      padding: 0;
      box-sizing: border-box;
      -webkit-box-sizing: border-box;
      -moz-box-sizing: border-box;
      -webkit-font-smoothing: antialiased;
      -moz-font-smoothing: antialiased;
      -o-font-smoothing: antialiased;
      font-smoothing: antialiased;
      text-rendering: optimizeLegibility;
    }

    .container {
      width: 100%;
      margin: 0 auto;
      position: relative;
    }

    #contact input[type="text"],
    #contact input[type="email"],
    #contact input[type="tel"],
    #contact textarea,
    #contact button[type="submit"] {
      font: 400 12px/16px "Verdana", Verdana;
    }

    #contact {
      background: #F9F9F9;
      padding: 25px;
      box-shadow: 0 0 20px 0 rgba(0, 0, 0, 0.2), 0 5px 5px 0 rgba(0, 0, 0, 0.24);
      height:477px;
    }

    #contact h3 {
      display: block;
      font-family:Verdana;
      font-size: 24px;
      font-weight: 300;
      margin-bottom: 10px;
    }

    #contact h4 {
      margin: 5px 0 15px;
      display: block;
      font-family:Verdana;
      font-size: 13px;
      font-weight: 400;
    }

    #contact h5 {
      text-decoration:underline;
      display: block;
      color:#4CAF50;
      font-family:Verdana;
      font-size: 19px;
      font-weight: normal;
      margin-bottom: 10px;
    }

    #contact h6 {
      text-decoration:underline;
      display: block;
      text-align:left;
      color:#4CAF50;
      font-family:Verdana;
      font-size: 15px;
      font-weight: normal;
      margin-bottom: 10px;
    }

    .fieldset {
      border: medium none !important;
      margin: 0 0 10px;
      min-width: 100%;
      padding: 0;
      width: 100%;
    }

    #contact input[type="text"],
    #contact input[type="email"],
    #contact input[type="tel"],
    #contact textarea {
      width: 100%;
      border: 1px solid #ccc;
      background: #FFF;
      margin: 0 0 5px;
      padding: 10px;
    }

    #contact input[type="text"]:hover,
    #contact input[type="email"]:hover,
    #contact input[type="tel"]:hover,
    #contact textarea:hover {
      -webkit-transition: border-color 0.3s ease-in-out;
      -moz-transition: border-color 0.3s ease-in-out;
      transition: border-color 0.3s ease-in-out;
      border: 1px solid #aaa;
    }

    #contact textarea {
      height: 100px;
      max-width: 100%;
      resize: none;
    }

    #button{
      float:right;
      cursor: pointer;
      padding: 13px 32px;
      width:125px;
      height:45px;
      border: none;
      font-family:Verdana;
      background: #4CAF50;
      color: #FFF;
      margin: 0 0 5px;
      font-size: 15px;
    }

    #button:hover{
      background: #43A047;
      -webkit-transition: background 0.3s ease-in-out;
      -moz-transition: background 0.3s ease-in-out;
      transition: background-color 0.3s ease-in-out;
    }

    #button:active {
      box-shadow: inset 0 1px 3px rgba(0, 0, 0, 0.5);
    }

    #contact input:focus,
    #contact textarea:focus {
      outline: 0;
      border: 1px solid #aaa;
    }

    ::-webkit-input-placeholder {
      color: #888;
    }

    :-moz-placeholder {
      color: #888;
    }

    ::-moz-placeholder {
      color: #888;
    }

    :-ms-input-placeholder {
      color: #888;
    }

    .dropbtn {
        background-color: #4CAF50;
        color: white;
        padding: 13px;
        font-size: 16px;
        width:125px;
        height:45px;
        border: none;
        cursor: pointer;
    }

    .dropdown {
        position: relative;
        display: inline-block;
    }

    .dropdown-content {
        display: none;
        position: absolute;
        background-color: #f9f9f9;
        min-width: 160px;
        box-shadow: 0px 8px 16px 0px rgba(0,0,0,0.2);
        z-index: 1;
    }

    .dropdown-content a {
        color: black;
        padding: 12px 16px;
        text-decoration: none;
        display: block;
    }

    .dropdown-content a:hover {background-color: #f1f1f1}

    .dropdown:hover .dropdown-content {
        display: block;
    }

    .dropdown:hover .dropbtn {
        background-color: #3e8e41;
    }
    input[type="file"]{
        display: none;
    }
    .custom-file-upload {
      cursor: pointer;
      padding: 13px 16px;
      width:125px;
      height:45px;
      border: none;
      font-family:Verdana;
      background: #4CAF50;
      color: #FFF;
      margin: 0 0 5px;
      font-size: 15px;
      display: inline-block;
      vertical-align: top;
      text-align: center;
    }
    .custom-file-upload:hover{
        background: #43A047;
      -webkit-transition: background 0.3s ease-in-out;
      -moz-transition: background 0.3s ease-in-out;
      transition: background-color 0.3s ease-in-out;
    }
    .custom-file-upload:active{
    box-shadow: inset 0 1px 3px rgba(0, 0, 0, 0.5);
    }
    .overlay {
        height: 477px;
        width: 0;
        position: fixed;
        z-index: 1;
        top: 0;
        left: 0;
        background-color: #F9F9F9;
        overflow-x: hidden;
        transition: 0.5s;
        padding-top: 25px;
        padding-bottom: 25px;
        padding-left: 25px;
        padding-right: 25px;
    }

    .overlay.collapsed {
        padding-top: 25px;
        padding-bottom: 25px;
        padding-left: 0;
        padding-right: 0;
    }

    .overlay-content {
        position: relative;
        /*top: 5%;*/
        width: 100%;
        height: 100%;
        text-align: center;
        /*margin-top: 25px;*/
    }

    .overlay-content .container {
        height: 100%;
    }

    .overlay-content fieldset:last-child {
        position: absolute;
        bottom: 0;
        margin-bottom: 0;
    }

    .overlay a {
        padding: 5px;
        margin-top:-15px;
        text-decoration: none;
        font-size: 36px;
        color: #818181;
        display: block;
        transition: 0.3s;
        z-index: 100;
    }

    .overlay a:hover, .overlay a:focus {
        color: #bababa;
    }

    .overlay .closebtn {
        position: absolute;
        top: 15px;
        right: 15px;
        font-size: 40px;
    }

    @media screen and (max-height: 450px) {
      .overlay a {font-size: 20px}
      .overlay .closebtn {
        font-size: 40px;
        top: 15px;
        right: 35px;
      }
    }
    #contact-submit{
      float:right;
      cursor: pointer;
      font-size:15px;
      padding: 13px 32px;
      width:125px;
      height:45px;
      border: none;
      font-family:Verdana;
      background: #4CAF50;
      color: #FFF;
      margin: 0 0 5px;
    }

    #contact-submit:hover{
      background: #43A047;
      -webkit-transition: background 0.3s ease-in-out;
      -moz-transition: background 0.3s ease-in-out;
      transition: background-color 0.3s ease-in-out;
    }

    #contact-submit:active {
      box-shadow: inset 0 1px 3px rgba(0, 0, 0, 0.5);
    }
    #label{
      float:left;
      text-decoration:underline;
      font-family:Verdana;
      font-size:15px;
    }
    #labelDetail{
      padding-left:15px;
      float:left;
      font-family:Verdana;
      font-size:13px;
      text-align:left;
      max-height: 135px;
      overflow: auto;
    }
    #labelName{
      padding-left:15px;
      float:left;
      font-family:Verdana;
      font-size:13px;
    }
    #labelNumber{
      padding-left:15px;
      float:left;
      font-family:Verdana;
      font-size:13px;
    }
    #labelEmail{
      padding-left:15px;
      float:left;
      font-family:Verdana;
      font-size:13px;
    }
#labelAttach{
  float:left;
  text-decoration:underline;
  font-family:Verdana;
  padding-top:12px;
  color:#4CAF50;
}
#labelFile{
  float:left;
  font-family:Verdana;
  padding-top:16px;
  font-size:10px;
  padding-left:7px;
}
#filename{
  font-family:Verdana;
  font-size:10px;
  padding-top:16px;

}

<div class="container">  
      <form id="contact">
        <h3>Connect With HR</h3>
        <fieldset class="fieldset">
          <div class="dropdown">
            <button class="dropbtn" id="my-location">Location</button>
      <div class="dropdown-content">
        <a href="#">Link 1</a>
        <a href="#">Link 2</a>
        <a href="#">Link 3</a>
      </div>
    </div>

    <div class="dropdown">
      <button class="dropbtn" id="my-category">Category</button>
      <div class="dropdown-content">
        <a href="#">Link 1</a>
        <a href="#">Link 2</a>
        <a href="#">Link 3</a>
      </div>
    </div>
        </fieldset>
        <fieldset class="fieldset">
          <textarea id="txtDetail" placeholder="Detail...." tabindex="2"></textarea>
        </fieldset>
          <h4>Contact Information</h4>
        <fieldset class="fieldset">
            <input id="txtName" placeholder="Name" type="text" tabindex="4" >
            <input id="txtNumber" placeholder="Preferred Contact Number" type="tel" tabindex="5">
            <input id="txtEmail" placeholder="Preferred Email" type="email" tabindex="6">
        </fieldset>
        <fieldset class="fieldset">
          
          
          <label for="file-upload" class="custom-file-upload">
        <i class="fa fa-cloud-upload"></i> Attachment
    </label>
    <input id="file-upload" type="file"/>
          <p id="filename" style="display: inline-block"></p>
          
          <div id="myNav" class="overlay collapsed">
      <a href="javascript:void(0)" class="closebtn" onclick="closeNav()">&times;</a>
      <div class="overlay-content">
        <div class="container">
            <h5>Summary</h5>
              <fieldset class="fieldset">
            <label id="label">Location:</label>
            <label id="labelLocation"></label>
          </fieldset>
              <fieldset class="fieldset">
            <label id="label">Category:</label>
            <label id="labelCategory"></label>
          </fieldset>
          <fieldset class="fieldset">
            <label id="label">Detail:</label>
            <label id="labelDetail"></label>
          </fieldset>
                <h6>Contact Information</h6>
              <fieldset class="fieldset">
                <label id="label">Name:</label>
                <label id="labelName"></label>
                </fieldset>
              <fieldset class="fieldset">
                <label id="label">Preferred Contact Number:</label>
                <label id="labelNumber"></label>
                </fieldset>
              <fieldset class="fieldset">
                <label id="label">Preferred Email:</label>
                <label id="labelEmail"></label>
                </fieldset>
       <fieldset class="fieldset">
         <label id="labelAttach">Attachment:</label>
         <label id="labelFile"></label>
          <button name="submit" id="contact-submit" data-submit="...Sending">Submit</button>
        </fieldset>
        </div>
      </div>  
    </div>  
    <span id="button" onclick="openNav()">Preview</span>
          </fieldset>
      </form>
    </div>