javascript - How to prevent user from clicking button more than once? - Stack Overflow

admin管理员组

文章数量:1389903

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

Share Improve this question Follow edited Apr 2, 2014 at 7:03 Rohan Kumar 40.6k1111 gold badges8080 silver badges110110 bronze badges asked Apr 2, 2014 at 6:44 SamuraiJackSamuraiJack 5,5691818 gold badges103103 silver badges212212 bronze badges 3

• 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

Add a ment  | 

4 Answers 4

Sorted by: Reset to default 2

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;
    }
});

本文标签： javascriptHow to prevent user from clicking button more than onceStack Overflow