hiding the link buttons when user leaves the text box

Question

I have a text box and two link buttons on my web page. When I put some value on the text box, based on that value and also as soon as I leave the textbox. I want to hide or make the link button invisible.

<asp:textBox id="textBox1" runat="server">
 <asp:linkButton id="link1" runat="server">
 <asp:linkButton id="link2" runar="server">

when the user enter value "X" in the textbox, I want to hide Link1 and Link2 otherwise I want Link1 and Link2 to be visible.

here is my code and it is not working:

function HidePick(selectObj) {    
       if (selectObj.value.toUpperCase() == "D9") {
        document.getElementById("LINK1").style.display = 'none';
    }
}

  <td><asp:TextBox ID="TXTTest1" runat="server" CssClass="cssTest" Width="30" onmouseout="javascript:HidePick(this);"

With error message:

"JavaScript runtime error: Unable to get property 'style' of undefined or null reference

why are you not using jquery? ... $("#link1").hide() or .toggle() https://api.jquery.com/ — jdave, Jul 28 '16 at 16:17

score 0 · Accepted Answer · answered Jul 28 '16 at 16:27

0

For that kind of DOM manipulation, it is easy with jQuery.

JS Fiddle - https://jsfiddle.net/p8pm6r5r

<asp:TextBox ID="textBox1" runat="server" />
<asp:LinkButton ID="link1" runat="server" Text="Button1" />
<asp:LinkButton ID="link2" runat="server" Text="Button2" />

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.2.4/jquery.min.js"></script>
<script type="text/javascript">

    $(function() {
        $("#<%= textBox1.ClientID %>").blur(function () {
            if ($(this).val() === "X") {
                $("#<%= link1.ClientID %>").hide();
                $("#<%= link2.ClientID %>").hide();
            }
        });
    })
</script>

answered Jul 28 '16 at 16:27

Win

61,100
13
102
181

It did not ask for jQuery, neither have tag with jQuery on it. – Aristos Jul 28 '16 at 16:30
It was tagged **ASP.Net**. It not uncommon to see **jQuery** in ASP.Net application these days. You just give him a fish, but I show him how to fish. – Win Jul 28 '16 at 16:35
Still stands, not ask for jQuery solution. – Aristos Jul 28 '16 at 16:38

score 0 · Answer 2 · edited May 23 '17 at 11:44

0

In asp.net the final render id may change on page, so on javascript you need to use the .ClientID of control... you code must be as:

document.getElementById("<%=link1.ClientID%>").style.display = 'none';

Related: Accessing control client name and not ID in ASP.NET

edited May 23 '17 at 11:44

Community

1
1

answered Jul 28 '16 at 16:30

Aristos

66,005
16
114
150

score 0 · Answer 3 · answered Jul 28 '16 at 17:14

 <asp:textBox id="textBox1" runat="server">
<asp:LinkButton ID="link1" runat="server" Text="Button1" />
<asp:LinkButton ID="link2" runat="server" Text="Button2" />

Assuming you don't want to use jQuery or any library;
At the end of your htmls in .aspx page add a script tag to bind the button to mouseleave or mouseout events. Just to make sure your textbox1's id is static (the way it is in your source), once your page is rendered on the browser check for your textbox1 and see if it has still the same id if not then copy that id and replace in the below event binder line of javascript code from textbox1 to (whatever_textbox1). Same step for your link ids too.

document.getElementById("textBox1").addEventListener("mouseout",HidePick,false);
    function HidePick(e){
        if (e.target.value.toUpperCase() == "D9")
             document.getElementById("LINK1").style.display = 'none';    
    }

hiding the link buttons when user leaves the text box

3 Answers3