Avatar of VBdotnet2005
VBdotnet2005Flag for United States of America asked on

Bootstrap - clear input

I am trying to use Bootstrap 3 and wanting to add clear on each textbox. It is not working. How should I fix it?

Javascript
    
            $(document).ready(function(){
                $(".TextBox").keyup(function(){
                    $(this).siblings(".searchclear").toggle(Boolean($(this).val()));
                });
                $(".searchclear").toggle(Boolean($(".TextBox").val()));
                $(".searchclear").click(function(){
                    $(".searchinput").val('').focus();
                    $(this).hide();
                });
            });
            
            
            
CSS
            
             .searchinput {
    width: 200px;
}

.searchclear {
    position:absolute;
    right:5px;
    top:0;
    bottom:0;
    height:14px;
    margin:auto;
    font-size:14px;
    cursor:pointer;
    color:#ccc;
}



HTML

<div class="btn-group">
 
   <asp:TextBox ID="UserID" runat="server" class="form-control" placeholder="UserID" autofocus></asp:TextBox>
  <span id="searchclear" class="searchclear glyphicon glyphicon-remove-circle"></span>
</div>

<div class="btn-group">

   <asp:TextBox ID="Password" runat="server" TextMode="Password" class="form-control" placeholder="Password"></asp:TextBox>
  <span id="searchclear" class="searchclear glyphicon glyphicon-remove-circle"></span>
</div>

Open in new window

ASP.NETJavaScriptCSSBootstrap

Avatar of undefined
Last Comment
sajayj2009

8/22/2022 - Mon
sajayj2009

what is ".searchinput"?
ASKER
VBdotnet2005

Actually, they should be UserID and Password id from textbox.

JS
    
            $(document).ready(function(){
                $(".TextBox").keyup(function(){
                    $(this).siblings(".searchclear").toggle(Boolean($(this).val()));
                });
                $(".searchclear").toggle(Boolean($(".TextBox").val()));
                $(".searchclear").click(function(){
                    $(".searchinput").val('').focus();
                    $(this).hide();
                });
            });
            
            
            
CSS
            
             .searchinput {
    width: 200px;
}

Open in new window

ASKER
VBdotnet2005

 $(document).ready(function(){
                $(".TextBox").keyup(function(){
                    $(this).siblings(".searchclear").toggle(Boolean($(this).val()));
                });
                $(".searchclear").toggle(Boolean($(".TextBox").val()));
                $(".searchclear").click(function(){
                    $(".UserID").val('').focus();
                    $(this).hide();
                });
            });
            
            
            
CSS
            
             .UserID{
    width: 200px;
}

Open in new window

Experts Exchange is like having an extremely knowledgeable team sitting and waiting for your call. Couldn't do my job half as well as I do without it!
James Murphy
ASKER CERTIFIED SOLUTION
sajayj2009

Log in or sign up to see answer
Become an EE member today7-DAY FREE TRIAL
Members can start a 7-Day Free trial then enjoy unlimited access to the platform
Sign up - Free for 7 days
or
Learn why we charge membership fees
We get it - no one likes a content blocker. Take one extra minute and find out why we block content.
See how we're fighting big data
Not exactly the question you had in mind?
Sign up for an EE membership and get your own personalized solution. With an EE membership, you can ask unlimited troubleshooting, research, or opinion questions.
ask a question