How to implement a click event on textbox in ASP.NET?

Question

In my web application I need a functionality so that when users click on textbox to input values, it should make the button and the other fields visible?

I am using the code provided below but, could not get it working.

C#:

protected void TextBox1_Click(object sender, EventArgs e)
{
    ButtonSearch.Visible = true;
}

ASP.NET:

<asp:TextBox ID="TextBox1" runat="server" OnTextChanged="TextBox1_TextChanged" OnClick="TextBox1_Click"></asp:TextBox>
<asp:Button ID="ButtonSearch" runat="server" OnClick="ButtonSearch_Click" Text="Search" Visible="False" />

How to accomplish this?

Answer 1

Set AutoPostback="True". This way the event will be fired server-side, and the button will become visible.

<asp:TextBox ID="TextBox1" runat="server" OnTextChanged="TextBox1_TextChanged"     OnClick="TextBox1_Click" AutoPostBack="true"></asp:TextBox>

However, if you only want to toogle visility of a button, you really should considerate javascript. This will save a trip back to the server.

<asp:TextBox onclick="txtBox1_ClientClicked()" ID="TextBox1" runat="server" OnClick="TextBox1_Click"></asp:TextBox>

<asp:Button ID="ButtonSearch" runat="server" OnClick="ButtonSearch_Click" Text="Search" style="display:none;" />

<script type="text/javascript">
    function txtBox1_ClientClicked(){
        var theButton = document.getElementById('<%=ButtonSearch.ClientID%>');
        theButton.style.display = 'block';
    }
</script>

Answer 2

You do not need to post back to the server to accomplish your job. You can use client side onFocus event and javascript/jquery, for example.

I know I used an input of type text, and you are using an ASP Control which posts on server, but here is a JSFiddle to get you on the right track: http://jsfiddle.net/Mmjtz/1/

Answer 3

$("<%= ButtonSearch.ClientID %>").click(function(){
$("#TextBox1").show():
});

In this code you need to pass fields ID which you want to visible on the click of button.

Answer 4

Put the textbox inside a div and use the div's onClick event from codebehind. It's not what you asked but it works for me without any errors. Here is a javascript function to implement requested event:

function toggleVisibility() 
{
document.getElementById('TextBox1').disabled = true;
            /*
            ...some other code...
            */
} 

And of course, you have to define your onclick event at the div definition after implementing this JS function.

<div id="TBdiv" onClick="toggleVisibility()">
<asp:TextBox ID="TextBox1"..../>
</div>

IMPORTANT: Since you now disabled your TextBox from codebehind, you have to enable it in somewhere before you want to use it again. Otherwise you will not see it while the page is running.

Answer 5

jQuery is the perfect solution for your problem. The code would be something like this:

$("#TextBox1").on("click",function(){$("#ButtonSearch").css("visibility", "visible");})

You include the script by adding <script src="//ajax.googleapis.com/ajax/libs/jquery/1.11.0/jquery.min.js"></script> to the page and then you can add the piece of code above to within <script></script> tags.