Call JavaScript function on <a> for show hide textbox

Rohan Ramani

6y1.7k.NET

Hi All,

I want to show hide the textbox on click of anchor tag, using javascript.

"txtMobile" CssClass="form-control" placeholder="Your Mobile Number" runat="server" required="required" Style="display: none">
"txtEmail" CssClass="form-control" placeholder="Your Email Address" runat="server" required="required">
"lnkToggle" style="font-size: smaller" >Sign in with mobile number?

If I click SignIn with mobile then Mobile textbox should be visible, if I sign in with Email than Email textbox should be visible and hide the mobile textbox.

2 Replies

Know the answer? Post it — somebody with the same question will find it here.

Piyush Pansuriya6y ago
Accepted answer
Hi Rohan,
You have to create a function in javascript as below:
"text/javascript">
        function showhideControls() {
            var lnk = document.getElementById("lnkToggle");
            if (lnk.innerHTML.includes('mobile')) {
                var txtMob = document.getElementById("txtMobile");
                txtMob.style.display = "block";
                var txtEma = document.getElementById("txtEmail");
                txtEma.style.display = "none";
                lnk.innerHTML = "Sign in with email id?"
            }
            else {
                var txtMob = document.getElementById("txtMobile");
                txtMob.style.display = "none";
                var txtEma = document.getElementById("txtEmail");
                txtEma.style.display = "block";
                lnk.innerHTML = "Sign in with mobile number?"
            }
        }

Then in your anchor tag, you have to call the javascript function in href
"lnkToggle" style="font-size: smaller" href="javascript:showhideControls();">Sign in with mobile number?
This may be helpful to you.
+2
Amit Mohanty6y ago
Hey you can try this also.
"text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.8.3/jquery.min.js">
"text/javascript">
    $(document).ready(function () {
        $("#textDiv").hide();
        $("#show").click(function () {

            $("#textDiv").toggle(function () {
                $(this).is(":visible") ? $("#show").text("close") : $("#show").text("show");
            });
        });
    });
    "show" href="#">Show
    "textDiv" style="position: absolute;">
        "txt1" CssClass="txtbox" runat="server">