CODEWITHSUNDEEP
javascriptasp.net
Johnny Bones
Johnny Bones

Reputation: 8414

Make a button invisible or visible using Javascript

I need to use an OnFocus event of a textbox in ASP.Net. 

 <asp:TextBox ID="TBAccountNum" runat="server" CssClass="textbox" Height="12px" Width="100px" Font-Size="Small" AutoCompleteType="None"  Wrap="False" OnFocus="Validator()" OnTextChanged="TBAccountNum_OnLeave" AutoPostBack="true"></asp:TextBox>

The only way to do that is to use Javascript, which I know nothing about. I found this little piece of code on SO that looks like it should work:

<asp:Content runat="server" ID="FeaturedContent" ContentPlaceHolderID="FeaturedContent">

<script type="text/javascript">

    function Validator()
    {
        document.getElementsByName("btnValidateWork").style.visibility = "visible"; 
        document.getElementsByName("btnSubmitWork").style.visibility = "hidden"
    }

However, when I run it I get the following error:

0x800a138f - Microsoft JScript runtime error: Unable to set value of the property 'visibility': object is null or undefined

Any ideas what I'm doing wrong (besides trying to write code I know nothing about... :oP )?

All relevant code has now been posted. I'm using IE9 on an Intranet (mandated by the company, so that can't change) if that matters.

Upvotes: 0

Views: 2648

Answers (2)

Daniel Gasser
Daniel Gasser

Reputation: 5143

As said before document.getElementsByName returns a collection (array) of HTML-Objects. So you need to address them like this:

 function Validate()
    {
        // To access the first
        document.getElementsByName("btnValidateWork")[0].style.visibility = "visible"; 
        document.getElementsByName("btnSubmitWork")[0].style.visibility = "hidden"
        // To access all of them
       var i = 0,
           validWork = document.getElementsByName("btnValidateWork");
       for (i = 0; i < validWork.length; i++) {
           validWork[i].style.visibility = "visible";
           // ...
       }
    }

See a working example here.

Upvotes: 0

Christian Benseler
Christian Benseler

Reputation: 8075

document.getElementsByName("btnValidateWork") returns an htmlcollection. You have to iterate it, and for each item (node) add the proper css.

Check out this: Using document.getElementsByName() isn't working?

EDIT:

to use getElementsByName, your element(s) must have a name property. Example:

<button name="btnValidateWork">my button?</button>
document.getElementsByName("btnValidateWork")[0].style.visibility = "hidden";

Fiddle: http://jsfiddle.net/chrisbenseler/h3dwwud6/

I think that a better approach is to use getElementsByClassName and add some class to it, and then do something like document.getElementsByClassName("hidden")

Upvotes: 1

Related Questions