drop down item to label

Question

I have code below for a contact form I am creating. Is it possible to have whatever item the user selects in each drop down list to appear on the labels next to Location and Category on both the main page and the preview page? Anything helps, cheers.

 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; } 

  * { 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:525px; } #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; max-height:150px;/* you can change as you need it */ overflow:auto;/* to get scroll */ } .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: 525px; 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:13px; } #labelDetail{ padding-left:15px; float:left; font-family:Verdana; font-size:13px; text-align:left; max-height: 115px; 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; font-size:13px; 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; } #labelLocation{ padding-left:15px; float:left; font-family:Verdana; font-size:13px; } #labelLocation1{ padding-left:15px; float:left; font-family:Verdana; font-size:13px; } #labelCategory{ padding-left:15px; float:left; font-family:Verdana; font-size:13px; } #labelCategory1{ padding-left:15px; float:left; font-family:Verdana; font-size:13px; } 

 <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="#">Gibraltar House</a> <a href="#">WLSC</a> <a href="#">CMF</a> <a href="#">Motorized</a> <a href="#">Telepharmacy</a> <a href="#">Anchorage-PAW</a> <a href="#">ADC</a> <a href="#">NSQM</a> <a href="#">Bellevue-PAW</a> <a href="#">PNW</a> </div> </div> <div class="dropdown"> <button class="dropbtn" id="my-category">Category</button> <div class="dropdown-content"> <a href="#">401K</a> <a href="#">Accidental Death & Dismemberment</a> <a href="#">Banking Info Change</a> <a href="#">Bereavement</a> <a href="#">Building Access</a> <a href="#">Canada Savings Bonds</a> <a href="#">Compensation</a> <a href="#">Customer Incident</a> <a href="#">Direct Deposit</a> <a href="#">Effectiveness Assessment Process</a> <a href="#">Employee and Family Assistance Program</a> <a href="#">Employee Discount</a> <a href="#">Employee History</a> <a href="#">Employee Ownership Plan</a> <a href="#">Employee Referral Program</a> <a href="#">Employee Survey</a> <a href="#">Employment Eligibility Verification</a> <a href="#">Expenses</a> <a href="#">Group Health & Dental</a> <a href="#">Group RRSP</a> <a href="#">Health & Safety</a> <a href="#">Health Savings Account</a> <a href="#">Holiday Calendar</a> <a href="#">Holidays/Leaves</a> <a href="#">Life Insurance</a> <a href="#">Medical Dental & Vision</a> <a href="#">New Hire Orientation</a> <a href="#">Other</a> <a href="#">Payroll</a> <a href="#">Pension</a> <a href="#">Personal Info change</a> <a href="#">Policy</a> <a href="#">Position Change</a> <a href="#">Record of Employment</a> <a href="#">Recruitment</a> <a href="#">Resignation/Termination</a> <a href="#">Shipment of Personal Belongings</a> <a href="#">Short Term Disability</a> <a href="#">Short Term Incentives Program (STIP)</a> <a href="#">Sick Leave</a> <a href="#">Tax Form</a> <a href="#">Temporary Disability Insurance</a> <a href="#">Time and Attendance</a> <a href="#">Training</a> <a href="#">Tuition Assistance Program (TAP)</a> <a href="#">Vacation</a> <a href="#">Work Schedule</a> <a href="#">Workers Compensation</a> </div> </div> </fieldset> <fieldset class="fieldset"> <label id="label">Location:</label> <label id="labelLocation1">Show choice here</label> </fieldset> <fieldset class="fieldset"> <label id="label">Category:</label> <label id="labelCategory1">Show choice here</label> </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">Show here</label> </fieldset> <fieldset class="fieldset"> <label id="label">Category:</label> <label id="labelCategory">Show here</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

Try this. I have done with jquery. If you don't want to use jquery please tell and I will try without it.

 $(function(){ $('#abc a').click(function(){ var location=$(this).text(); $('#labelLocation1').text(location); }); }); $(function(){ $('#xyz a').click(function(){ var category=$(this).text(); $('#labelCategory1').text(category); }); }); 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; } 

 * { 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:525px; } #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; max-height:150px;/* you can change as you need it */ overflow:auto;/* to get scroll */ } .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: 525px; 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:13px; } #labelDetail{ padding-left:15px; float:left; font-family:Verdana; font-size:13px; text-align:left; max-height: 115px; 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; font-size:13px; 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; } #labelLocation{ padding-left:15px; float:left; font-family:Verdana; font-size:13px; } #labelLocation1{ padding-left:15px; float:left; font-family:Verdana; font-size:13px; } #labelCategory{ padding-left:15px; float:left; font-family:Verdana; font-size:13px; } #labelCategory1{ padding-left:15px; float:left; font-family:Verdana; font-size:13px; } 

 <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> <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" id="abc"> <a href="#">Gibraltar House</a> <a href="#">WLSC</a> <a href="#">CMF</a> <a href="#">Motorized</a> <a href="#">Telepharmacy</a> <a href="#">Anchorage-PAW</a> <a href="#">ADC</a> <a href="#">NSQM</a> <a href="#">Bellevue-PAW</a> <a href="#">PNW</a> </div> </div> <div class="dropdown"> <button class="dropbtn" id="my-category">Category</button> <div class="dropdown-content" id="xyz"> <a href="#">401K</a> <a href="#">Accidental Death & Dismemberment</a> <a href="#">Banking Info Change</a> <a href="#">Bereavement</a> <a href="#">Building Access</a> <a href="#">Canada Savings Bonds</a> <a href="#">Compensation</a> <a href="#">Customer Incident</a> <a href="#">Direct Deposit</a> <a href="#">Effectiveness Assessment Process</a> <a href="#">Employee and Family Assistance Program</a> <a href="#">Employee Discount</a> <a href="#">Employee History</a> <a href="#">Employee Ownership Plan</a> <a href="#">Employee Referral Program</a> <a href="#">Employee Survey</a> <a href="#">Employment Eligibility Verification</a> <a href="#">Expenses</a> <a href="#">Group Health & Dental</a> <a href="#">Group RRSP</a> <a href="#">Health & Safety</a> <a href="#">Health Savings Account</a> <a href="#">Holiday Calendar</a> <a href="#">Holidays/Leaves</a> <a href="#">Life Insurance</a> <a href="#">Medical Dental & Vision</a> <a href="#">New Hire Orientation</a> <a href="#">Other</a> <a href="#">Payroll</a> <a href="#">Pension</a> <a href="#">Personal Info change</a> <a href="#">Policy</a> <a href="#">Position Change</a> <a href="#">Record of Employment</a> <a href="#">Recruitment</a> <a href="#">Resignation/Termination</a> <a href="#">Shipment of Personal Belongings</a> <a href="#">Short Term Disability</a> <a href="#">Short Term Incentives Program (STIP)</a> <a href="#">Sick Leave</a> <a href="#">Tax Form</a> <a href="#">Temporary Disability Insurance</a> <a href="#">Time and Attendance</a> <a href="#">Training</a> <a href="#">Tuition Assistance Program (TAP)</a> <a href="#">Vacation</a> <a href="#">Work Schedule</a> <a href="#">Workers Compensation</a> </div> </div> </fieldset> <fieldset class="fieldset"> <label id="label">Location:</label> <label id="labelLocation1">Show choice here</label> </fieldset> <fieldset class="fieldset"> <label id="label">Category:</label> <label id="labelCategory1">Show choice here</label> </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">Show here</label> </fieldset> <fieldset class="fieldset"> <label id="label">Category:</label> <label id="labelCategory">Show here</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 2

I've added the ID category-dropdown and location-dropdown to the divs that contain the list elements.

addDropdownEventListeners loops through all of the list elements and adds a click event listener to each. When a user clicks a list element, it will add the innerHTML corresponding label.

var categoryItems = document.querySelectorAll("#category-dropdown > a"),
    locationItems = document.querySelectorAll("#location-dropdown > a");

addDropdownEventListeners(categoryItems, 'Category');
addDropdownEventListeners(locationItems, 'Location');

function addDropdownEventListeners(items, labelName) {
    for (var i = 0; i < items.length; i++) {
        items[i].addEventListener("click", function(e) {
            document.getElementById("label" + labelName + "1").innerHTML = e.target.innerHTML;
            document.getElementById("label" + labelName).innerHTML = e.target.innerHTML;
        });
    }
}

Implemented into your code

 var categoryItems = document.querySelectorAll("#category-dropdown > a"), locationItems = document.querySelectorAll("#location-dropdown > a"); addDropdownEventListeners(categoryItems, 'Category'); addDropdownEventListeners(locationItems, 'Location'); function addDropdownEventListeners(items, labelName) { for (var i = 0; i < items.length; i++) { items[i].addEventListener("click", function(e) { document.getElementById("label" + labelName + "1").innerHTML = e.target.innerHTML; document.getElementById("label" + labelName).innerHTML = e.target.innerHTML; }); } } 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; } 

 * { 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:525px; } #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; max-height:150px;/* you can change as you need it */ overflow:auto;/* to get scroll */ } .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: 525px; 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:13px; } #labelDetail{ padding-left:15px; float:left; font-family:Verdana; font-size:13px; text-align:left; max-height: 115px; 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; font-size:13px; 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; } #labelLocation{ padding-left:15px; float:left; font-family:Verdana; font-size:13px; } #labelLocation1{ padding-left:15px; float:left; font-family:Verdana; font-size:13px; } #labelCategory{ padding-left:15px; float:left; font-family:Verdana; font-size:13px; } #labelCategory1{ padding-left:15px; float:left; font-family:Verdana; font-size:13px; } 

 <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" id="location-dropdown"> <a href="#">Gibraltar House</a> <a href="#">WLSC</a> <a href="#">CMF</a> <a href="#">Motorized</a> <a href="#">Telepharmacy</a> <a href="#">Anchorage-PAW</a> <a href="#">ADC</a> <a href="#">NSQM</a> <a href="#">Bellevue-PAW</a> <a href="#">PNW</a> </div> </div> <div class="dropdown"> <button class="dropbtn" id="my-category">Category</button> <div class="dropdown-content" id="category-dropdown"> <a href="#">401K</a> <a href="#">Accidental Death & Dismemberment</a> <a href="#">Banking Info Change</a> <a href="#">Bereavement</a> <a href="#">Building Access</a> <a href="#">Canada Savings Bonds</a> <a href="#">Compensation</a> <a href="#">Customer Incident</a> <a href="#">Direct Deposit</a> <a href="#">Effectiveness Assessment Process</a> <a href="#">Employee and Family Assistance Program</a> <a href="#">Employee Discount</a> <a href="#">Employee History</a> <a href="#">Employee Ownership Plan</a> <a href="#">Employee Referral Program</a> <a href="#">Employee Survey</a> <a href="#">Employment Eligibility Verification</a> <a href="#">Expenses</a> <a href="#">Group Health & Dental</a> <a href="#">Group RRSP</a> <a href="#">Health & Safety</a> <a href="#">Health Savings Account</a> <a href="#">Holiday Calendar</a> <a href="#">Holidays/Leaves</a> <a href="#">Life Insurance</a> <a href="#">Medical Dental & Vision</a> <a href="#">New Hire Orientation</a> <a href="#">Other</a> <a href="#">Payroll</a> <a href="#">Pension</a> <a href="#">Personal Info change</a> <a href="#">Policy</a> <a href="#">Position Change</a> <a href="#">Record of Employment</a> <a href="#">Recruitment</a> <a href="#">Resignation/Termination</a> <a href="#">Shipment of Personal Belongings</a> <a href="#">Short Term Disability</a> <a href="#">Short Term Incentives Program (STIP)</a> <a href="#">Sick Leave</a> <a href="#">Tax Form</a> <a href="#">Temporary Disability Insurance</a> <a href="#">Time and Attendance</a> <a href="#">Training</a> <a href="#">Tuition Assistance Program (TAP)</a> <a href="#">Vacation</a> <a href="#">Work Schedule</a> <a href="#">Workers Compensation</a> </div> </div> </fieldset> <fieldset class="fieldset"> <label id="label">Location:</label> <label id="labelLocation1">Show choice here</label> </fieldset> <fieldset class="fieldset"> <label id="label">Category:</label> <label id="labelCategory1">Show choice here</label> </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">Show here</label> </fieldset> <fieldset class="fieldset"> <label id="label">Category:</label> <label id="labelCategory">Show here</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>