Here Laxmikant has explained with an example, Show Hide TextBox on Button Click using jQuery.
When the Yes Button is clicked, the TextBox will be shown and when the No Button is clicked the TextBox will be hidden.
In this article I will explain with an example,show hide TextBox on Button Click using jQuery.
When the Yes Button is clicked, the TextBox will be shown and when the No Button is clicked the TextBox will be hidden.
Show Hide TextBox on Button Click using jQuery
Copy this HTML Markup code, This code consists of two Button and one textbox.
Both the Buttons YES and NO have been assigned a jQuery click event handler.
[php]
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.8.3/jquery.min.js"></script>
<script type="text/javascript">
debugger;
//Show Hide TextBox on Button Click using jQuery
$(function () {
debugger;
$("#btnYes").click(function () {
if ($(this).val() == "Yes") {
$("#divAdhar").show();
}
});
$("#btnNo").click(function () {
if ($(this).val() == "No") {
$("#divAdhar").hide();
}
});
});
</script>
<span>Do you have Adhar Card?</span>
<input type="button" id="btnYes" value="Yes" />
<input type="button" id="btnNo" value="No"/>
<hr />
<div id="divAdhar" style="display: none">
Enter Adhar Card Number:
<input type="text" id="txtAdharNumber" />
</div>
[/php]
Output
