Jquery - Show a javascript alert box when you click on a disabled text input

Question

I have a form where one of the text inputs is set to disabled. It's important that we keep this text input but it has confused some users. They try to click and edit and think that the form is broken because they can not edit that box.

I've tried to add an onclick to trigger a window.alert box to warn them that they can't edit this text input. I haven't been able to get it to work.

Does anyone know a way using jquery that if they click on a disabled text input that it shows a window.alert?

Thanks for the help...

Any reason you can't _hide_ the input? Hidden, enabled inputs are still submitted with the form. — Chowlett, Jan 19 '12 at 16:51
@Chowlett: That may be undesireable (as disabled inputs *aren't* submitted with the form). — T.J. Crowder, Jan 19 '12 at 16:55

Mikołaj Stolarski · Answer 1 · 2012-01-20T10:27:52.997

4

How about wrapping input field onto div with class and trigger it on that div ?

EDIT:

It works in Firefox if you set z-index properites, and absolute positions like this jsfiddle.net/aFnJt/3

edited Jan 20 '12 at 10:27

answered Jan 19 '12 at 16:48

Mikołaj Stolarski

183
6

This will only work once the wrapper is clicked. That's the result for me at least, in Firefox. – Richard Hedges Jan 19 '12 at 16:52
@RichardHedges: Blast, I can confirm that with FF9. Works great on Chrome and IE, but not on FF or Opera. – T.J. Crowder Jan 19 '12 at 16:55
How about trying setting higher z-index on that div, and setting background-color: transparent; ? – Mikołaj Stolarski Jan 19 '12 at 16:58
@MikołajStolarski Just gave that a go. Still nothing on FF – Richard Hedges Jan 19 '12 at 16:59
Perhaps another way would be to find the elements position, and on click of that area run the alert. Would probably be a bit messy though. – Richard Hedges Jan 19 '12 at 17:02
1

It works if you set z-index properites, and absolute positions like this http://jsfiddle.net/aFnJt/3/ – Mikołaj Stolarski Jan 19 '12 at 17:40
I've been working on the DIV idea, but can't seem to get it to work. I may have to try another approach all together. Any ideas? – Will Jan 22 '12 at 16:03
2

I Found a solution. I set the input field to readonly instead of disabled. That seemed to do the trick. – Will Jan 22 '12 at 16:33
@Will, thanks, readonly does the trick for me too! Note that browsers treat such elements a bit differently (http://stackoverflow.com/questions/7730695/whats-the-difference-between-disabled-disabled-and-readonly-readonly-for-te). If you don't mind, I'd make an answer to your question for future visitors like me. – Dennis Golomazov Nov 12 '13 at 04:58

score 0 · Answer 2 · edited May 23 '17 at 10:31

0

Making the field readonly can help, because the click event will be fired. Though be aware of the differences in behaviour.

<input type="text" name="yourname" value="Bob" readonly="readonly" />

(thanks @Will for the idea)

edited May 23 '17 at 10:31

Community

1
1

answered Nov 12 '13 at 09:52

Dennis Golomazov

16,269
5
73
81

score 0 · Answer 3 · answered Jan 19 '12 at 16:49

0

Select the element with :disabled and then make a alert:

$('form').on('click', 'input:disabled', function() {
  window.alert('This input is disabled');
});

answered Jan 19 '12 at 16:49

Wouter J

41,455
15
107
112

Click events don't fire on disabled inputs – mrtsherman Jan 19 '12 at 16:51
Doesn't work. Nifty idea hooking the event on the wrapper and then filtering, but apparently jQuery follows the standard model that makes disabled elements not fire `click`. – T.J. Crowder Jan 19 '12 at 16:51

Sam Greenhalgh · Answer 4 · 2012-01-19T17:34:33.320

0

Firefox compatible example

$(function(){
$("INPUT:disabled")
.wrap("<span>")
.parent()
.css({
    display:'inline-block',
    position:'relative'
})
.append(
    $("<span>")
    .css({
        position:'absolute',
        top:'0',
        left:'0',
        width:'100%',
        height:'100%',
        xIndex: 9999
    })
    .click(function(){alert('Disabled');})
);
})

$(function(){
    $("INPUT:disabled")
    .wrap("<span>")
    .parent()
    .click(function(){alert('Disabled')});
})

edited Jan 19 '12 at 17:34

answered Jan 19 '12 at 16:56

Sam Greenhalgh

5,952
21
37

See [Mikolaj's answer](http://stackoverflow.com/a/8929926/157247), doesn't work with Firefox. – T.J. Crowder Jan 19 '12 at 16:58

score 0 · Answer 5 · edited May 23 '17 at 10:24

0

Given the Firefox issue with Mikolaj's answer, I think your best bet is to replace the field with a styled div or similar. If the problem is that people are confused by the input, make it clearer visually that the input is disabled (and replacing it with just text is one great way to do that).

edited May 23 '17 at 10:24

Community

1
1

answered Jan 19 '12 at 16:57

T.J. Crowder

1,031,962
187
1,923
1,875

score 0 · Answer 6 · answered Jan 19 '12 at 16:57

From a user perspective I would prefer not to see the use of an alert box. Here are two more user friendly alternatives.

http://jsfiddle.net/cPaNA/

$('input:disabled[value=a]').hide();              //hide it instead
$('input:disabled[value=b]').val('disabled');     //use value for a message

You can also use the :disabled pseudoselector to make the fact that it is disabled more obvious.

input:disabled { color: gray; }

martincarlin87 · Answer 7 · 2012-01-19T16:55:16.277

-2

Update ...

Try wrapping the diabled input in a span, or div and give that element an id and use it as the jQuery selector:

 $(document).ready(function() {
    $('#ID').click(function() {
        alert('This input is disabled');
    });
});

link: http://api.jquery.com/click/

edited Jan 19 '12 at 16:55

answered Jan 19 '12 at 16:48

martincarlin87

10,848
24
98
145

3

Disabled inputs don't fire `click` – T.J. Crowder Jan 19 '12 at 16:49
Your update is just a duplicate of Mikolaj's answer using a different element (as are several other answers here). And unfortunately, doesn't work with Firefox. – T.J. Crowder Jan 19 '12 at 16:59

Jquery - Show a javascript alert box when you click on a disabled text input

7 Answers7

Firefox compatible example