In this article I will explain with an example, how to display TextBox value in Label using
jQuery.
When the Button is clicked, the TextBox value is retrieved and displayed in the Label using
jQuery.
HTML Markup
The HTML Markup consists of following elements:
TextBox – For capturing user input.
Button – For submitting form.
Label – For displaying TextBox value.
Name: <input type="text" id="txtName" />
<input type="button" id="btnShow" value="Show Name" />
<hr />
<label id="lblName"></label>
Displaying (Showing) TextBox value in Label using jQuery
Inside the HTML Markup, first the following script file is inherited.
1.jquery.min.js
Inside the
jQuery document ready event handler, the Button has been assigned with a
jQuery click event handler.
When the Button is clicked, the TextBox value is retrieved and displayed in Label element.
<script type="text/javascript" src=" https://cdnjs.cloudflare.com/ajax/libs/jquery/3.7.1/jquery.min.js"></script>
<script type="text/javascript">
$(function () {
$("#btnShow").click(function () {
var name = $("#txtName").val();
$("#lblName").html(name);
});
});
</script>
Screenshot
![Display (Show) TextBox value in Label using Query]()
Browser Compatibility
* All browser logos displayed above are property of their respective owners.
Demo
Downloads
