Javascript function to hide HTML textbox on PageLoad

Question

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!

Did you try visiblity:hidden?

Sriram Sakthivel
– Sriram Sakthivel

2013-10-07 16:02:42 +00:00
Commented Oct 7, 2013 at 16:02 — Sriram Sakthivel
– Sriram Sakthivel, Commented Oct 7, 2013 at 16:02
Yes, it does not work.

Brian Brian
– Brian Brian

2013-10-07 16:04:32 +00:00
Commented Oct 7, 2013 at 16:04 — Brian Brian
– Brian Brian, Commented Oct 7, 2013 at 16:04

bfavaretto · Accepted Answer · 2013-10-07 16:10:26Z

1

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.

answered Oct 7, 2013 at 16:10

bfavaretto

72k18 gold badges118 silver badges162 bronze badges

Sign up to request clarification or add additional context in comments.

1 Comment

Brian Brian Over a year ago

I had to delete some code in my Page-Load, but it works!! Thank you very much :)

SLaks · Accepted Answer · 2013-10-07 15:59:31Z

1

display: hidden is not a valid CSS value.

You want display: none.

answered Oct 7, 2013 at 15:59

SLaks

891k182 gold badges1.9k silver badges2k bronze badges

Collectives™ on Stack Overflow

Javascript function to hide HTML textbox on PageLoad

2 Answers 2

1 Comment

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

1 Comment

Comments

Your Answer

Sign up or log in

Post as a guest

Related