chemdry
asked on
jquery addclass not working on textarea
I'm using the following code to highlight any field that changes on multiple forms in on a page.
$(document).ready(function (){
var jInput = $( ":input" );
jInput.change(function( objEvent ){
$( this ).addClass( "dirty" );
}
);
});
<style type="text/css">
input.dirty {
border:1px solid #660000;
outline: 1px solid #660000;
}
</style>
It works perfect for all the input types: text, select, checkbox, radio. It does not work for textarea though.
When I look at it in firebug, it shows that the class is added in the HTML code but it doesn't apply in the css like it does for the other input types.
$(document).ready(function
var jInput = $( ":input" );
jInput.change(function( objEvent ){
$( this ).addClass( "dirty" );
}
);
});
<style type="text/css">
input.dirty {
border:1px solid #660000;
outline: 1px solid #660000;
}
</style>
It works perfect for all the input types: text, select, checkbox, radio. It does not work for textarea though.
When I look at it in firebug, it shows that the class is added in the HTML code but it doesn't apply in the css like it does for the other input types.
textarea is not input
ASKER CERTIFIED SOLUTION
membership
This solution is only available to members.
To access this solution, you must be a member of Experts Exchange.
ASKER
For jquery it is if i'm reading it right. Plus i am seeing the class added to the code, just not applied.
If not how would i accomplish this?
http://api.jquery.com/input-selector/
If not how would i accomplish this?
http://api.jquery.com/input-selector/
ASKER
Perfect Hielo, I was looking at in the wrong area for the answer. Changed input.dirty to .dirty and that did it durh
you used the selector correctly. AND like you stated:
"When I look at it in firebug, it shows that the class is added in the HTML code.."
So jquery is also working fine, BUT the browser does not acknowledge the css rules because YOUR css rules explicitly say:
apply these:
border:1px solid #660000;
outline: 1px solid #660000;
ONLY to <INPUT> elements with class="dirty"
When jquery sees ":input" it includes <INPUT> AND <TEXTAREA> elements, BUT for CSS, <INPUT> and <TEXTAREA> elements are different elements!
apply the changes from my previous post