Show Hide TextBox on RadioButton click

Adnaan

SOLVED CLOSED ACTIVE ANSWERED
User: Adnaan
Posted: 7 hours ago
Forum: JavaScript
Replies: 1
Views: 34

How to show hide TextBox on RadioButton click in JavaScript?

<span>Do you have Passport?</span>
<input id="rbYes" type="radio" name="confirm" value="Yes" />Yes
<input id="rbNo" type="radio" name="confirm" value="No" />No
<hr />
<input id="txtPassportNumber" type="text" style="display:none" />

When click yes the show the TextBox else hide.

Download FREE API for Word, Excel and PDF in ASP.Net

dharmend...

0 1

Reply
User: dharmendr
Replied: 7 hours ago
Report

Hi Adnaan,

On Yes RadioButton click, set the TextBox style display attrubute to block else none.

Refer below example.

HTML

<html>
<head>
    <meta charset="utf-8" />
    <title></title>
    <style type="text/css">
        body { font-family: Arial; font-size: 10pt; }
    </style>
</head>
<body>
    <span>Do you have Passport?</span>
    <input id="rbYes" type="radio" name="confirm" value="Yes" onclick="ShowHideTextBox()" />Yes
    <input id="rbNo" type="radio" name="confirm" value="No" onclick="ShowHideTextBox()" />No
    <hr />
    <input id="txtPassportNumber" type="text" style="display:none" />
    <script type="text/javascript">
        function ShowHideTextBox() {
            document.getElementById("txtPassportNumber").style.display
                = document.getElementById("rbYes").checked ? "block" : "none";
        }
    </script>
</body>
</html>

Demo

I agree, here is the link: https://www.e-iceblue.com/Introduce/spire-office-for-net-free.html

Description

Description is required.

Show Hide TextBox on RadioButton click

Company

Explore

Follow us

Contact Us