CODEWITHSUNDEEP
javascriptjquery
Will
Will

Reputation: 21

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

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

Upvotes: 1

Views: 3676

Answers (7)

Dennis Golomazov
Dennis Golomazov

Reputation: 17339

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)

Upvotes: 0

Mikołaj Stolarski
Mikołaj Stolarski

Reputation: 183

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

Upvotes: 4

Sam Greenhalgh
Sam Greenhalgh

Reputation: 6136

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')});
})

Upvotes: 0

mrtsherman
mrtsherman

Reputation: 39872

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; }

Upvotes: 0

T.J. Crowder
T.J. Crowder

Reputation: 1074158

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

Upvotes: 0

martincarlin87
martincarlin87

Reputation: 11042

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/

Upvotes: -2

Wouter J
Wouter J

Reputation: 41934

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

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

Upvotes: 0

Related Questions