CODEWITHSUNDEEP
javascriptasp.net-mvc
batwadi
batwadi

Reputation: 1916

Disable the button after clicking the button once

In my application i need to disable the button once it is clicked so that user should not click more than once. APplication is MVC ASP.NET i have done this in normal asp.net application. I tried below lines of code but its not working

thanks in Advance

edited How can i implement this using javascript ?

Upvotes: 3

Views: 22993

Answers (9)

Paul
Paul

Reputation: 1

This will work:

OnClientClick="if (this.getAttribute('clicked') == '1') {
    return false; 
} else { 
    this.setAttribute('clicked', '1'); 
}"

Upvotes: 0

user1548400
user1548400

Reputation: 11

var but = 1;
function f() {
    if(but == 1) {
        alert("Hello World!");
        but = 0;
    }
}

Hope it helps.

Upvotes: 0

SteveCav
SteveCav

Reputation: 6729

Here is one of my buttons that calls an MVC action then disables itself:

<button  class="btn blue pull-right" onclick="location.href='@Url.Action("Index", "GetData", new { page = Model.PageNumber + 1, sortOrder = Model.CurrentSort, fromDate = Model.FromDateParam, toDate = Model.ToDateParam, terminatingpoint = Model.TerminationPointParam, SurecallNo = Model.SurecallNoParm, CallerID = Model.CallerIDParm, outcome = Model.OutcomeParm, pagesize = Model.PageSize })';this.disabled = 'disabled'" >Next ></button>

Upvotes: 0

Alan Piralla
Alan Piralla

Reputation: 1196

This works fine as well, and it's easy to understand:

var myButton = $('input:submit');
var waitMessage = 'wait please...';
myButton.click(function() {
    if (bottone.val() == waitMessage) {
        return false;
    };
    myButton.val(waitMessage);
    console.log('iClicked'); // this line is for testing only, it can be removed.
});

Upvotes: 0

kristopher gourd
kristopher gourd

Reputation: 1

i have found that if you disable or even remove the button or input element it will stop the call back to the server the most simplest way to handle this is a hide() because you are not removing the functionality of the input button/whatever 

    $('input_selector').click(function () {
      $(this).hide(200/whatever);
      $(this).before('<p>Waiting for server to respond?!?</p><br/>')
    });

since it is a hide the br is to make sure the p tag is on top of it. there may be a better way and i am open to suggestions.

Upvotes: 0

Shadow Wizzard
Shadow Wizzard

Reputation: 66398

You can try this:

onclick="if (this.getAttribute('clicked') == '1') { return false; } else { this.setAttribute('clicked', '1'); }"

It will not disable anything, just prevent the click event after being first clicked.

Upvotes: 3

Phil Hale
Phil Hale

Reputation: 3491

I've found that with IE8 (I'm not sure about other versions of IE) that you cannot submit a form if you disable the button on the click event. So I came up with an alternate solution. Hide the clicked button and put a new disabled button in it's place. Here's the code:

$().ready(function() {
  $("someButtonSelector").click(function () {
    $(this).hide();
    $(this).after('<input type="button" disabled="disabled" value="' + $(this).val() + '" />');
    return true;
  });
});

Upvotes: 7

griegs
griegs

Reputation: 22770

@prakash have you used jQuery to disable or even hide the button?

If your button's id is say "btnClickMe" then the following jQuery will do the job.

$("#btnClickMe").hide();

You could also set the disbaled attribute using jQuery;

$("#btnClickMe").attr("disabled","disabled");

The one above is untested but should work.

Upvotes: 0

Yuriy Faktorovich
Yuriy Faktorovich

Reputation: 68747

<button type="button" onclick="this.disabled = 'disabled';">Click Me!</button>

Although the Button web control renders as a submit:

<input type="submit" onclick="this.disabled = 'disabled';" value="Submit" />

Upvotes: 2

Related Questions