ASP.net button onserverclick only works when onclick isn't defined

Question

    protected void btnNext_Click(object sender, EventArgs e)
    {
        btnNext.InnerHtml = "CLICK";
    }

    <button type="submit" runat="server" onserverclick="btnNext_Click" id="btnNext">Next &gt;</button>

This works fine, but when I add an onclick event:

<button type="submit" runat="server" onserverclick="btnNext_Click" onclick="return checkForm();" id="btnNext">Next &gt;</button>

And in the head:

<script type="text/javascript">

    function checkForm() {

        if (document.getElementById("<%=lstChooseSpec.ClientID %>").value) {
            return true;
        } else {
            $.jGrowl("<strong>Warning!</strong><br />Please select an item", { sticky: true });
            return false;
        }
    }
</script>

It submits the form, but doesn't change the buttons text to 'CLICK'. The text only changes to 'CLICK' when the onclick() isn't defined, although the form is still submitting!

Answer 1

try without 'return': <button type="submit" runat="server" onserverclick="btnNext_Click" onclick="checkForm();" id="btnNext">Next &gt;</button>
Or if you wanted checkForm() to control whether to post or not - do like this:

onclick="if (!checkForm()) return;"