CODEWITHSUNDEEP
c#javascripthtml
Brian Brian
Brian Brian

Reputation: 163

Javascript function to hide HTML textbox on PageLoad

So I have a search textbox at the top of my website in the Master Page that I wish to disappear when the user is transferred to my search page. My textbox is written like so:

  <div class = "SearchBox">
    <form action="javascript:searchSite()">
      <input type="text" id="searchIn" />
    </form>
  </div>

The best way I could think to do this was to have some JavaScript run on the PageLoad event of my search page, like so: 

protected void Page_Load(object sender, EventArgs e)
    {
       if (!IsPostBack)
        {
            this.ClientScript.RegisterStartupScript(this.GetType(), "show", "<script>document.getElementById('searchIn').style.display = 'none'</script>");
        }
   }

I am fairly certain that the javascript works, because sometimes the textbox will disappear for a second or two. Regardless, it immediately comes back and won't remain hidden. I have a asp:Textbox that I can easily hide using: 

  Site1 m = Master as Site1;
        m.OtherTextBox.Visible = false;

I don't understand why hiding the HTML textbox is so difficult. Any suggestions or thoughts on how to remedy this would be much appreciated!

Upvotes: 1

Views: 1635

Answers (2)

bfavaretto
bfavaretto

Reputation: 71939

Page_Load is a server-side event, but you have to also wait for the element to be loaded on the client side. You can wrap you js code in a window.onload handler:

this.ClientScript.RegisterStartupScript(this.GetType(), "show", "<script>window.onload = function() { document.getElementById('searchIn').style.display = 'none'; }</script>");

Also, use display: none as explained by SLaks.

Upvotes: 1

SLaks
SLaks

Reputation: 887797

display: hidden is not a valid CSS value.

You want display: none.

Upvotes: 1

Related Questions