触发JQuery事件后未触发Codebehind OnClick事件

Question

I'm using html5 constraint validation on a few fields on my form, such as:

<asp:TextBox ID="TextBox1" runat="server" Required="required" ToolTip="Description is required."></asp:TextBox>
<asp:Button ID="btnSubmit" runat="server" Text="Submit" OnClick="btnSubmit_Click" />

And I would like to disable the submit button through CSS and JQuery on click, but only AFTER the validation passes. I attempted to hook into the form submit event like so:

<script type='text/javascript'>
var $form = $('#form1');
var $submitButton = $('#<% = btnSubmit.ClientID %>');

$form.submit(function () {
$submitButton.prop('disabled', true);
})
</script>

Which successfully disables the button after validation, a postback is called, but my btnSubmit_click event is not fired.

How do I determine through javacript/jquery when html5 constraint validation has passed so I can execute a jquery function that disables the button but then still allows my btnSubmit_click event to fire?

Update: I'm using plain JQuery 2.0.3

Answer 1

It's a common issue to fire Codebehind events and JQuery events simultaneously in some cases. you can use some tricks to overcome this issue but i'm using this one as a dirty solution, maybe there are some cleaner ways too.

You can let the JQuery form.submit event fire normally in first time, but when you click on Submit Button, add a "DontFireJQuery" class to button and after set button as disable, It's fired again automatically using :

__doPostBack("<%= btnSubmit.UniqueID %>", "");

In the next firing, the button has "DontFireJQuery" class and JQuery skip it, so the Codebehind OnClick event is fired.

<asp:TextBox ID="TextBox1" runat="server" Required="required" ToolTip="Description is required."></asp:TextBox>
<br />
<asp:Button ID="btnSubmit" runat="server" Text="Submit" />
<br />
<asp:Label ID="lblMsg" runat="server" Text=""></asp:Label>

<script type='text/javascript'>
    Sys.Application.add_load(initJScripts);
    function initJScripts() {
        var $form = $('#form1');
        var $submitButton = $('#<% = btnSubmit.ClientID %>');
        if (!$submitButton.hasClass("DontFireJQuery")) {
            $form.submit(function () {
                $submitButton.addClass("DontFireJQuery");
                $submitButton.prop('disabled', true);
                __doPostBack("<%= btnSubmit.UniqueID %>", "");
            })
        }
    }
</script>

In CodeBehind :

Private Sub btnSubmit_Click(sender As Object, e As EventArgs) Handles btnSubmit.Click
    System.Threading.Thread.Sleep(1000)
    lblMsg.Text = "OK"
End Sub

(to convert VB to C# you can use this online tool if needed: http://codeconverter.sharpdevelop.net/SnippetConverter.aspx )

This line:

System.Threading.Thread.Sleep(1000)

is for test, in order to show that the button is set as disable immediately and 1 sec later, "OK" message will be shown in lblMsg. as you know, after each postback, the changes that applied by JQuery will be vanished and button is set as enable again when the OK message shown. if you want to set button as disable permanently, you can change the code behind like this:

Private Sub btnSubmit_Click(sender As Object, e As EventArgs) Handles btnSubmit.Click
    System.Threading.Thread.Sleep(1000)
    btnSubmit.Enabled = False
    lblMsg.Text = "OK"
End Sub

This code is written in a way that can be used in UpdatePanel without any problems too.