In this article I will explain with an example, how to display (copy) TextBox value to Label using JavaScript in HTML.
When the Copy Button is clicked, the value of the TextBox is assigned to the Label using JavaScript in HTML.
HTML Markup
The following HTML Markup consists of an HTML TextBox, a Button and a Label element.
The Button element has been assigned a JavaScript OnClick event handler.
<input type="text" id="txtName"/>
<input type="button" id = "btnCopy" value="Copy To Label" onclick = "CopyToLabel()" />
<hr />
<label id = "lblName"></label>
JavaScript function to Display (Copy) TextBox value to Label
When the Copy Button is clicked, the CopyToLabel JavaScript function is called.
First the TextBox and then the Label elements are referenced and then the value of the TextBox is assigned to the Label element using JavaScript.
<script type="text/javascript">
function CopyToLabel() {
//Reference the TextBox.
var txtName = document.getElementById("txtName");
//Reference the Label.
var lblName = document.getElementById("lblName");
//Copy the TextBox value to Label.
lblName.innerHTML = txtName.value;
}
</script>
Screenshot
![Display (Copy) TextBox value to Label using JavaScript]()
Browser Compatibility
The above code has been tested in the following browsers.
![Internet Explorer]()
![FireFox]()
![Chrome]()
![Safari]()
![Opera]()
* All browser logos displayed above are property of their respective owners.
Demo
Downloads
