Anjali5 Anjali5 - 4 months ago 9
Javascript Question

hiding the link buttons when user leaves the text box

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

Win Win
Answer

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>