Drop-Down-Liste Artikel zum Etikett

Question

Ich habe den Code unten für ein Kontaktformular, das ich erstellt habe. Ist es möglich, den ausgewählten Wert aus beiden Dropdown-Listen zu den Etiketten auf der Vorschauseite neben den Feldern "Standort" und "Kategorie" zu erhalten? Alles hilft, danke.

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

Wie haben Sie es konfiguriert Sie eine ID zu Ihrem Dropdown-Listen hinzufügen könnten und die Daten mit innerHTML- passieren. Überprüfe es, ich denke es war was du verlangst. Ich habe fügen Sie einfach die ID, sagte ich und was folgt auf Ihre openNav() Funktion:

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>