I'm trying to disable a link button to prevent the user from submitting several times.

I've seen many questions like this here on SO, most people suggest the following javascript:

button.disabled = true or button.disabled = 'disabled'

Which indeed disables the button (the button is greyed out), but the problem is that it's still clickable, and still submits!!

Here is my stripped down code:

function ValidateButton(button){
// some other code
button.disabled = true;
button.value = 'Processing...';
}

<asp:LinkButton Text="Submit" ID="btnSubmit" runat="server" onclick="btnSubmitRow_Click" OnClientClick="return ValidateButton(this);"/>

1. Why is the button still clickable, and submits after being disabled ?
2. The button text is still "Submit" not "Processing...', why?

I'm trying to disable a link button to prevent the user from submitting several times.

I've seen many questions like this here on SO, most people suggest the following javascript:

button.disabled = true or button.disabled = 'disabled'

Which indeed disables the button (the button is greyed out), but the problem is that it's still clickable, and still submits!!

Here is my stripped down code:

function ValidateButton(button){
// some other code
button.disabled = true;
button.value = 'Processing...';
}

<asp:LinkButton Text="Submit" ID="btnSubmit" runat="server" onclick="btnSubmitRow_Click" OnClientClick="return ValidateButton(this);"/>

1. Why is the button still clickable, and submits after being disabled ?
2. The button text is still "Submit" not "Processing...', why?

• javascript
• asp

6 Answers 6

A LinkButton control is rendered as an a element, and that doesn't have a disabled attribute or a value attribute.

The code that you have works for a Button control that renders as an input type="button" or input type="submit", but not for a link. To make it look disabled, you would change it's color, and to prevent it from submitting you would return false from the client side click event handler. Use the innerHTML attribute to change the text of the link.

I had the same problem, disabling the link button does not prevent it from sending the request, you should remove the event from the link button when disabling it.
sometimes i replaced the link button with a label that have the same text.

To prevent postback add a return false to your ValidateButton function when you decide the button should be disabled.

add this to ValidateButton:

button.onclick = function(){return false;};

If the button is still clickable and the value never changes to "Processing..." then are you sure you're targeting the button correctly?

You might try targetting the button by id instead:

document.getElementById("btnSubmit ").disabled = true;
document.getElementById("btnSubmit ").value = 'Processing...';

Then you'll know for sure that you're manipulating the right element.

You could alternately script a change to the form's submit event. Set the onSubmit() function to something like return false; - this way the user can't put the cursor into a form field and submit it by hitting enter, which circumvents the button anyhow.

You could disable the LinkButton as usual (either client-side or server-side) and you would have to modify your JavaScript to only do work if the button/link is not disabled. So in your case:

<asp:LinkButton Text="Submit" ID="btnSubmit" runat="server" OnClientClick="return ValidateButton(this);"></asp:LinkButton>

And in your client-side code:

function ValidateButton(button){
    if (!button.disabled) {
        // do work here
    }
}

If the client-side onClick function returns false, then the postback will never happen.