If a disabled input button is clicked, display message

Question

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/>

See this: http://stackoverflow.com/a/7834293/3751213, however you may use `mousedown` event... — j809, Jul 15 '14 at 14:18
Possible duplicate of http://stackoverflow.com/questions/7833854/jquery-detect-click-on-disabled-submit-button — Chris Lam, Jul 15 '14 at 14:24

Niels Keurentjes · Answer 1 · 2014-07-15T14:25:29.083

4

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>.

edited Jul 15 '14 at 14:25

answered Jul 15 '14 at 14:17

Niels Keurentjes

41,402
9
98
136

what if the user navigate through the button using tab key and press enter ? – TCHdvlp Jul 15 '14 at 14:19
Thanks, Just found this also works: `` – MRC Jul 15 '14 at 14:19
Yeah I found some conflicting reports on browser adoption of the first solution. Added a simple workaround which is neater than using sparse markup as in the other suggestions. – Niels Keurentjes Jul 15 '14 at 14:26
I have removed this as the answer due to it not working on Chrome. – MRC Sep 24 '14 at 14:59

score 3 · Accepted Answer · answered Jul 15 '14 at 14:20

3

<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.

answered Jul 15 '14 at 14:20

MRC

555
2
10
30

If a disabled input button is clicked, display message

2 Answers2