从占位符到标签获取信息

Question

I have code below for a contact form I am creating using HTML, CSS and JavaScript. Is it possible to have label2 under the preview button page to say whatever the user typed into the Detail placeholder on the main page? So if someone wrote "Hello" in the Detail placeholder, label2 on the preview page would say "Hello". Anything helps, cheers.

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

 * { 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 { color:white; display: block; font-family:Verdana; font-size: 23px; font-weight: 300; 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: rgb(0,0,0); background-color: rgba(0,0,0, 0.9); overflow-x: hidden; transition: 0.5s; } .overlay-content { position: relative; top: 5%; width: 100%; text-align: center; margin-top: 25px; } .overlay a { padding: 5px; margin-top:-15px; text-decoration: none; font-size: 36px; color: #818181; display: block; transition: 0.3s; } .overlay a:hover, .overlay a:focus { color: #f1f1f1; } .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; padding: 13px 32px; width:125px; height:45px; border: none; font-family:Verdana; background: #4CAF50; color: #FFF; margin: 0 0 5px; font-size: 15px; } #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{ color:white; padding-left:25px; float:left; font-family:Verdana; font-size:13px; } #label2{ color:white; padding-left:25px; float:left; font-family:Verdana; font-size:13px; } 

 <div class="container"> <form id="contact" action="" method="post"> <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 placeholder="Detail...." tabindex="2"></textarea> </fieldset> <h4>Contact Information</h4> <fieldset class="fieldset"> <input placeholder="Name" type="text" tabindex="4"> <input placeholder="Preferred Contact Number" type="tel" tabindex="5"> <input placeholder="Preferred Email" type="email" tabindex="6"> </fieldset> <filedset 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"/> <div id="myNav" class="overlay"> <a href="javascript:void(0)" class="closebtn" onclick="closeNav()">&times;</a> <div class="overlay-content"> <div class="container"> <form id="contact" action="" method="post"> <fieldset class"fieldset"> <h5>Summary</h5> </fieldset> <fieldset class="fieldset"> <label id="label">Detail:</label> <label id="label2">Detail Information Here...</label> </fieldset> <!-- <fieldset class="fieldset"> <button name="submit" type="submit" id="contact-submit" data-submit="...Sending">Submit</button> </fieldset> --> </form> </div> </div> </div> <span id="button"" onclick="openNav()">Preview</span> <fieldset> </form> </div> 

Answer 1

You could add a new label which contains the value of the relative input, then set its innerHTML with the value you need, so:

• add an id to the detail input (placeholder) (ex: id="txtDetail" )
• add a label (near the label "Detail:" to show the value of txtDetail

• finally, before to show the preview, copy the value from txtDatail to label, like:

  var input = document.getElementById("txtDetail"); var value = input.value; //<-- getting the value from input text var label = document.getElementById("labelDetail"); label.innerHTML = value; //<-- setting that value in the label in preview section

See following snippet, please:

 function openNav() { var input = document.getElementById("txtDetail"); var value = input.value; var label = document.getElementById("labelDetail"); label.innerHTML = value; document.getElementById("myNav").style.width = "100%"; } function closeNav() { document.getElementById("myNav").style.width = "0%"; } 

 * { 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 { color:white; display: block; font-family:Verdana; font-size: 23px; font-weight: 300; 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: rgb(0,0,0); background-color: rgba(0,0,0, 0.9); overflow-x: hidden; transition: 0.5s; } .overlay-content { position: relative; top: 5%; width: 100%; text-align: center; margin-top: 25px; } .overlay a { padding: 5px; margin-top:-15px; text-decoration: none; font-size: 36px; color: #818181; display: block; transition: 0.3s; } .overlay a:hover, .overlay a:focus { color: #f1f1f1; } .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; padding: 13px 32px; width:125px; height:45px; border: none; font-family:Verdana; background: #4CAF50; color: #FFF; margin: 0 0 5px; font-size: 15px; } #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{ color:white; padding-left:25px; float:left; font-family:Verdana; font-size:13px; } #labelDetail{ color:white; padding-left:25px; float:left; font-family:Verdana; font-size:13px; } #label2{ color:white; padding-left:25px; float:left; font-family:Verdana; font-size:13px; } 

 <div class="container"> <form id="contact" action="" method="post"> <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 placeholder="Name" type="text" tabindex="4"> <input placeholder="Preferred Contact Number" type="tel" tabindex="5"> <input placeholder="Preferred Email" type="email" tabindex="6"> </fieldset> <filedset 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"/> <div id="myNav" class="overlay"> <a href="javascript:void(0)" class="closebtn" onclick="closeNav()">&times;</a> <div class="overlay-content"> <div class="container"> <form id="contact" action="" method="post"> <fieldset class"fieldset"> <h5>Summary</h5> </fieldset> <fieldset class="fieldset"> <label id="label">Detail:</label> <label id="labelDetail"></label> <label id="label2">Detail Information Here...</label> </fieldset> <!-- <fieldset class="fieldset"> <button name="submit" type="submit" id="contact-submit" data-submit="...Sending">Submit</button> </fieldset> --> </form> </div> </div> </div> <span id="button"" onclick="openNav()">Preview</span> <fieldset> </form> </div> 

I hope it helps you, bye.

Answer 2

you can use jQuery. here is your edited fiddle:

 function openNav() { document.getElementById("myNav").style.width = "100%"; var detail = $('textarea').val(); //gets the value in the textarea $('#label2').text(detail); //inserts the value into label2 } function closeNav() { document.getElementById("myNav").style.width = "0%"; } 

 * { 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 { color:white; display: block; font-family:Verdana; font-size: 23px; font-weight: 300; 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: rgb(0,0,0); background-color: rgba(0,0,0, 0.9); overflow-x: hidden; transition: 0.5s; } .overlay-content { position: relative; top: 5%; width: 100%; text-align: center; margin-top: 25px; } .overlay a { padding: 5px; margin-top:-15px; text-decoration: none; font-size: 36px; color: #818181; display: block; transition: 0.3s; } .overlay a:hover, .overlay a:focus { color: #f1f1f1; } .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; padding: 13px 32px; width:125px; height:45px; border: none; font-family:Verdana; background: #4CAF50; color: #FFF; margin: 0 0 5px; font-size: 15px; } #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{ color:white; padding-left:25px; float:left; font-family:Verdana; font-size:13px; } #label2{ color:white; padding-left:25px; 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" action="" method="post"> <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 placeholder="Detail...." tabindex="2"></textarea> </fieldset> <h4>Contact Information</h4> <fieldset class="fieldset"> <input placeholder="Name" type="text" tabindex="4"> <input placeholder="Preferred Contact Number" type="tel" tabindex="5"> <input placeholder="Preferred Email" type="email" tabindex="6"> </fieldset> <filedset 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"/> <div id="myNav" class="overlay"> <a href="javascript:void(0)" class="closebtn" onclick="closeNav()">&times;</a> <div class="overlay-content"> <div class="container"> <form id="contact" action="" method="post"> <fieldset class"fieldset"> <h5>Summary</h5> </fieldset> <fieldset class="fieldset"> <label id="label">Detail:</label> <label id="label2">Detail Information Here...</label> </fieldset> <!-- <fieldset class="fieldset"> <button name="submit" type="submit" id="contact-submit" data-submit="...Sending">Submit</button> </fieldset> --> </form> </div> </div> </div> <span id="button"" onclick="openNav()">Preview</span> <fieldset> </form> </div>