Question 70016 in Ajax Question posted in
You can find the official documentation here.

Show/Hide Password ASP.NET – Jquery ajax

I am trying to implement a show/hide button in ASP.NET, and through some research I have discovered that using AJAX could be my best bet. I have been trying to understand AJAX, but I am clearly doing something wrong as the code does nothing.

I am trying to put this code in the body of my code, it is essentially the same code as that found on https://www.c-sharpcorner.com/blogs/show-and-hide-password-using-jquery-in-asp-net

    <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>  
    <script type="text/javascript">  
        $(document).ready(function () {
            $("<%=showP.ClientID %>").hover(function show() {
                //Change the attribute to text  
                $("<%=txtPassword.ClientID %>").attr('type', 'text');
                $("<%=showP.ClientID %>").removeClass('eyeOpen').addClass('eyeClosed');
            },
                function () {
                    //Change the attribute back to password  
                    $("<%=txtPassword.ClientID %>").attr('type', 'password');
                    $("<%=showP.ClientID %>").removeClass('eyeClosed').addClass('eyeOpen');
                });
            //CheckBox Show Password  
            $("<%=showP.ClientID %>").click(function () {
                $("<%=txtPassword.ClientID %>").attr('type', $(this).is(':checked') ? 'text' : 'password');
            });
        });
    </script>

Do I need to implement the AJAX CSS files for the script to function? The link above makes use of them, but I did not implement any of the styles myself, so I figured I could leave out a link to the stylesheets like this below:

<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">  
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css">

I really do not have any of knowledge of AJAX, so any help would be greatly appreciated 🙂

Tags:

2

Answers


  1. 0

    Well, no, you don’t need anything really special here. jQuery DOES help, and you can do it this way:

            <h3>Enter password</h3>
        <asp:TextBox ID="txtPass" runat="server" TextMode="Password" ClientIDMode="Static"></asp:TextBox>
        <br />
        <br />
        <asp:CheckBox ID="ckShowPass" runat="server" Text="Show password" onclick="myshowp()" />

        <script>
            function myshowp() {
                ckbox = $('#ckShowPass')
                txtBox = $('#txtPass')

                if (ckbox.is(':checked')) {
                   txtBox.attr("Type", "Text");
                }
                else {
                   txtBox.attr("Type", "Password");
                }
            }
        </script>

    Output:

    enter image description here

    And if we check the box show password, then we get:

    enter image description here

    So, the above DOES use jQuery, and that is useally installed for you.

    You can also use pure JavaScript, but the Text mode is read only, and thus you have to make a copy of the control – which is painful.

    Login or Signup to reply.
  2. 0

    for the working demo, I used the HTML element you can do the same with the Asp.Net element.

    <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
<h3>Enter password</h3>
        
        <input id="txtPass" class="test" type="password"></input>
        <br />
        <br />
       
          show <input type="checkbox" name="mycheckbox" id="ckShowPass" onclick="myshowp(this)"/>
        <script>
            function myshowp(e) {
                txtBox = $('#txtPass')
                if (e.checked) {
                   txtBox.attr("Type", "Text");
                }
                else {
                   txtBox.attr("Type", "Password");
                }
            }
        </script>
    Login or Signup to reply.
Please signup or login to give your own answer.

Back To Top
Search