Question

I tried to hide elements in my html form by defining a javascript function at the beginning of my page and calling it through a button’s onclick attribute. It seems like the browser (firefox 4.x) tries initially to hide the given element when I click the button, but then quickly reloads it. Without the script, obviously, no attempt is made by the browser to hide the element. Here is the pertinent code:

function showHide() {
document.getElementById('search').style.display = 'none';
}


<button onclick="showHide()">Advanced</button>

Does firefox default to what it finds in the css file instead of using the javascript modifications?

Edit #1:
First off, I am trying to get an text edit field to disappear. When I click on the “Advanced” button, it does disappear for a fraction of a second and then reappears. I tried returning false at the end of showHide(), but that did nothing, and I tried onclick=”return showHide();” but that didn’t work as well. I checked the css file, and there are no display: settings that could conflict with this. I’ll see if I can’t get this up on my server in a few minutes and post the link.

Edit #2: Thanks for the help. Changing the type attribute of the button fixed the issue by preventing the button from defaulting to “submit,” as suggested below. This kept the form from being reloaded, which was causing the element to reappear every time it tried to go away. Not something a beginner like me would have known.

Answer 1

The html <button> element supports a type attribute. If omitted, it defaults to type="submit". This causes the button to work exactly like an <input type="submit" />.

So… if your button is located inside a form, then clicking the button causes the click handler to run (calling showHide()), but then it submits the form. It is the form submission that is causing the page reload.

To fix this, simply add the proper type to your button:

<button type="button" onclick="showHide()">Advanced</button>