JS

Show Hide TextBox on Button Click using jQuery

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.

<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>

Output
show-hide-textbox-button-click-using-jquery
show-hide-textbox-button-click-using-jquery

Leave a Reply

Your email address will not be published. Required fields are marked *