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.
LVL 2
chemdryAsked:
Who is Participating?
 
hieloConnect With a Mentor Commented:
that's because your css is specifically targetting <INPUT> elements :
  input.dirty{...}


get rid of input:
.dirty{...}

OR add the textarea element
input.dirty, textarea.dirty{..}


do not confuse jQuery selectors with CSS selectors. Two completely different worlds.
0
 
leakim971PluritechnicianCommented:
textarea is not input
0
 
chemdryAuthor Commented:
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/
0
 
chemdryAuthor Commented:
Perfect Hielo, I was looking at in the wrong area for the answer. Changed input.dirty to .dirty and that did it durh
0
 
hieloCommented:

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

Open in new window

0
Question has a verified solution.

Are you are experiencing a similar issue? Get a personalized answer when you ask a related question.

Have a better answer? Share it in a comment.

All Courses

From novice to tech pro — start learning today.