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

The reason you’re seeing this is because when you have both on a button it runs your on click handler followed by the __doPostBack function so the onclick would look something like this

onclick="return checkForm(); __doPostBack('btnNext','')

So as you can see the __doPostBack, which actually sets up which server function to call, is never called. However, since the button is of type submit, the form is still sent back to the server.