I have an input button, which when it is disabled, and someone tries to click it, needs to display an alert.

How is it possible to display a javascript message despite being disabled?

Tried this with no luck:

<input type="submit" onclick="alert('click')" value="Disabled Input Button" disabled/>

I have an input button, which when it is disabled, and someone tries to click it, needs to display an alert.

How is it possible to display a javascript message despite being disabled?

Tried this with no luck:

<input type="submit" onclick="alert('click')" value="Disabled Input Button" disabled/>

• javascript
• jquery

• See this: stackoverflow./a/7834293/3751213, however you may use mousedown event... – j809 Commented Jul 15, 2014 at 14:18
• Possible duplicate of stackoverflow./questions/7833854/… – Chris Lam Commented Jul 15, 2014 at 14:24

2 Answers 2

Use onmousedown instead of onclick, which is only fired when it is 'allowed' to. Some browsers, particularly Chrome, appear to disable all DOM events when a form element is disabled. While I think this is out of spec, you can use the following workaround:

Instead of using the disabled attribute, use CSS pointer-events to achieve a similar effect, illustrated here:

button.disabled {
    pointer-events:none;    
}

And then just use <button class="disabled"> instead of <button disabled>.

<span  onclick="alert('This input is disabled')">
    <input type="submit" value="Disabled Input Button" disabled/>
</span>

Wrapping it with another tag that has the on click function works.