I am trying to prevent user from clicking the submit button more than once. I tried a number of things which are on SO for similar issue.

Like for example :

<script type="text/javascript" src=".11.0.min.js">
    $('<% =btnUpload.ClientID %>').click(function () { this.disabled = true });
</script>

I also tried..

<script type="text/javascript" src=".11.0.min.js">
  $("form").submit(function() {
    $(this).submit(function() {
        return false;
    });
    return true;
  });
</script>

and also tried...on master page

<form onsubmit="if(submitted) return false; submitted = true; return true">

But to no use.. I am still able to click on button more than once.

Markup:

<asp:Button ID="btnUpload" runat="server" class="blue-button" 
CssClass="ButtonText"OnClick="btnUpload_Click"
 OnClientClick="if (!confirm('Are you sure that you want to Save entered details ?'))
 return false;return doCustomValidate(event,true);"
     Text="Save" />

Also note that I am using master page so

I am trying to prevent user from clicking the submit button more than once. I tried a number of things which are on SO for similar issue.

Like for example :

<script type="text/javascript" src="http://code.jquery./jquery-1.11.0.min.js">
    $('<% =btnUpload.ClientID %>').click(function () { this.disabled = true });
</script>

I also tried..

<script type="text/javascript" src="http://code.jquery./jquery-1.11.0.min.js">
  $("form").submit(function() {
    $(this).submit(function() {
        return false;
    });
    return true;
  });
</script>

and also tried...on master page

<form onsubmit="if(submitted) return false; submitted = true; return true">

But to no use.. I am still able to click on button more than once.

Markup:

<asp:Button ID="btnUpload" runat="server" class="blue-button" 
CssClass="ButtonText"OnClick="btnUpload_Click"
 OnClientClick="if (!confirm('Are you sure that you want to Save entered details ?'))
 return false;return doCustomValidate(event,true);"
     Text="Save" />

Also note that I am using master page so

• javascript
• jquery
• asp
• c#-4.0

• Once the form submits the page probably reloads, and you start over again, all javascript is lost. – adeneo Commented Apr 2, 2014 at 6:49
• not related, but for ease of JS/jQuery set your button control ClientIDMode to "Static" then in the jQuery you can use standard referencing : $('#btnUpload') – fnostro Commented Apr 2, 2014 at 6:56
• why dont you disable in code behind (.cs file) logic like button clicked event – Ajay Commented Apr 2, 2014 at 9:21

4 Answers 4

If you want the user to click on the button just once, use .one() to attach event.

jquery url : http://api.jquery./one/

Add a disabled attribute to it.

$('#<% =btnUpload.ClientID %>').click(function () {
    $(this).prop("disabled", true);
});

You missed # in your id prepend it before <% =btnUpload.ClientID %> like,

$(function(){
    $('#<% =btnUpload.ClientID %>').click(function () {
        this.disabled = true;
    });
});

If you want to add click event once only then use one() like,

$(function(){
    $('#<% =btnUpload.ClientID %>').one('click',function () {
        // your code on click event
    });
});

If, your id changes(Clientid changes after render) then try to use class selector like,

$(function(){
    $('.ButtonText').click(function () {
        this.disabled = true;
    });
});

Set one count variable in javascript. initialize it's value as 0. In .click() event listener check the condition. If it is 0, allow to execute the code and increase count by 1. Else, return false.

var count = 0;
$('#<% =btnUpload.ClientID %>').click(function () {
    if (count == 0) {
        count++;
        return true;
    } else {
        return false;
    }
});