venturoso venturoso - 7 months ago 57
Javascript Question

Disabling double click works on Firefox, but does not work on Chrome

I need to prevent double click in a asp.net button, when the form is posted.

I have tried the following jQuery code:

$(this).submit(function () {
$('.btn').prop("disabled", "disabled");
});


And it works in Firefox browser, but not in Chrome.

Here is the HTML of my asp.net button:

<form name="aspnetForm" method="post" action="reset-password.aspx" id="aspnetForm">
<div class="orangeBTN">
<input type="button" name="ctl00$ctl00$content$content$btnSubmit" value="Submit" onclick="javascript:__doPostBack(&#39;ctl00$ctl00$content$content$btnSubmit&#39;,&#39;&#39;)" id="ctl00_ctl00_content_content_btnSubmit" class="btn pri" />
</div>
</form>


Is there a simple method that I can use that will be universal?

For your help, many thanks.

UPDATE I

I am including the .aspx html, and the JavaScript that now seem to work for me.

<asp:Panel ID="pnlInput" CssClass="pnlInput" runat="server">
<fieldset id="resetPassRight">
<asp:Panel ID="pButtons" runat="server" CssClass="buttons">
<asp:Button ID="btnSubmit" Text="Submit" CssClass="btn pri" runat="server" />
</asp:Panel>
</fieldset>
</asp:Panel>


JavaScript:

<script type="text/javascript">
$(document).ready(function () {
$('.pnlInput fieldset .btn').one('click', function () {
$(this).trigger("click");
$(this).attr('disabled', 'disabled');
});
});
</script>


UPDATE II

Below there is the jQuery code that I ended up using. So far I think it works.

/** Start - This jQuery will disable double click */
$('.pnlInput fieldset .btn').one('click', function () {
$(this).trigger("click");
$(this).attr("disabled", 'disabled');
});
/** End - This jQuery will disable double click */


One of the reasons jQuery was not executing was the fact that the asp button has a property of:

UseSubmitBehavior="false"


And this was preventing the client code to be evaluated correctly across different browsers.

Answer

If the input has a type="button" it will not trigger the submit function (not even on FF, or at least I was not able to get it), as you can see on this fiddle: http://jsfiddle.net/4ye9921e/ (replaced the target with an empty function to avoid errors)

If you change the input to have type="submit", then the submit function will be triggered and the button will be disabled. You can see it on this other fiddle: http://jsfiddle.net/4ye9921e/1/

So, just change the input to a submit, and then the onsubmit event will be triggered.