In this article I will explain with an example, how to display (show) TextBox value in Label using
JavaScript.
HTML Markup
The HTML Markup consists of following elements:
TextBox – For capturing user input.
Label – For capturing TextBox value and showing to user.
Button – For displaying TextBox value.
The Button has been assigned with
JavaScript onclick event handler.
Name:<input type="text" id="txtName" />
<input type="button" id="btnShow" value="Show Name" onclick="ShowName()" />
<hr />
<label id="lblName"></label>
Displaying (Showing) TextBox value in Label using JavaScript
When the
Show Name Button is clicked, the
ShowName JavaScript function is called.
Inside the
ShowName JavaScript function, first the TextBox and then the Label elements are referenced.
Finally, the value of the TextBox is assigned to the Label element using
JavaScript.
<script type="text/javascript">
function ShowName() {
//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 (Show) TextBox value in Label using JavaScript]()
Browser Compatibility
* All browser logos displayed above are property of their respective owners.
Demo
Downloads
