ASP.net onserverclick button works only when onclick is not 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 the onclick event:

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

And in my 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 does not change the button text to 'CLICK'. The text only changes to 'CLICK' when onclick () is undefined, although the form is still submitted!

Answer 1

The reason you see this is because when you have both buttons, it starts your handler on a click and then the __ doPostBack function , so onclick will look something like this.

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

, , __doPostBack, , , . , submit, .

Answer 2

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

, , checkForm() , :

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

Answer 3

:

onclick="javascript:if (!validaForm()) return false;"

.