ONCLientClick() posts back even when function returns false

Question

I am trying to make it so an ASP:Button doesn't post back and refresh the page.

I have set OnClientClick to return false as the result of the function.

HTML -

                        <asp:Button ID="englishButton" runat="server" Text="English" OnClientClick="return englishClick();" />

JS -

function englishClick() {
            russianButton.style.backgroundColor = "WhiteSmoke";
            englishButton.style.backgroundColor = "teal";
            hebrewButton.style.backgroundColor = "WhiteSmoke";
            englishTable.style.visibility = "visible";
            hebrewTable.style.visibility = "hidden";
            russianTable.style.visibility = "hidden";
            return false;
        }

The style changes happen but then the page is immediately refreshed and the style returns to its original state.

Answer 1

If you don't want it to interact with the server, why not just use a plain HTML button? There's no need for an ASP control here.

Also I would always recommend the use of unobtrusive event handlers using addEventListener as being more readable and maintainable than using inline event attributes in the HTML.

HTML:

<button type="button" id="englishButton">English</button>

JavaScript:

document.getElementById("englishButton").addEventListener("click", englishClick);

function englishClick() {
  russianButton.style.backgroundColor = "WhiteSmoke";
  englishButton.style.backgroundColor = "teal";
  hebrewButton.style.backgroundColor = "WhiteSmoke";
  englishTable.style.visibility = "visible";
  hebrewTable.style.visibility = "hidden";
  russianTable.style.visibility = "hidden";
}

Answer 2

This is common misconception when working with WebForms combined with javascript. In javascript pure (html and javascript) when you "return false" that means you don't want that action to be performed. So if you write

<input type="submit" onclick="return false;" />

that means the submit button won't work. In webforms pure you are working on a very high level (mainly in the server side) and each postback re-renders the entire page. even if you just changed something tiny - the whole html+css+javascript goes back and forth and re-calculates and re-renders. bummer, ah?

Here is a classical case of mixed intentions. You need to decide what you are doing - if pure html + java-script is your intention use (pseudo code):

<input type='button' onclick='englishButton' value='English' /> 

or even better (still pseudo code, but html5 pseudo-code)

<button onclick='return englishButton();'>English</button>

if webforms is your thing - stick to that - do your manipulations on the server-side and keep it elegant and simple and quick to render. Webforms would also make sense if you don't care about network traffic and spending too much overhead and instead want everything up and running in a short amount of time.

But you're probably better off selecting one or the other and not mixing these two approaches.