tags:

views:

26

answers:

1

I would like a separate DIV that's holding the input to also change in background color. How would I add it to my existing code that works?

<script type="text/javascript">
jQuery(document).ready(function() {
jQuery("input:[type=text]").focus(function () {
 jQuery(this).addClass("highLightInput");

});
jQuery("input:[type=text]").blur(function () {
jQuery(this).removeClass("highLightInput");
});
    });
 </script>
+2  A: 
<script type="text/javascript">
$(document).ready(function() {
$("input:[type=text]").focus(function () {
 $(this).addClass("highLightInput");
$(this).parent('div').addClass('highlight');

});
$("input:[type=text]").blur(function () {
$(this).removeClass("highLightInput");
$(this).parent('div').removeClass('highlight');
});
    });
 </script>
Moin Zaman
I tried it and only the input changes. Here is my html: <div id="quote_input" class="qty" style="width: 95px"> <input class="textQ" style="width: 74px"> </div>
Erik
@Erik Moin's code looks correct. Do you have a a `highlight` class defined for your `<div id="quote_input">`?
Pat
Thanks Moin... Your help did it. I found a typo.. Many thanks.
Erik
i just used a class called 'highlight' either change it to 'hightLightInput' which will make it the same background as the input or add a new rule to your CSS like so: 'div.highlight {background:lightgreen;}'
Moin Zaman
Just curious, Could I add a select drop down to be included?
Erik
you can. is it beside the input? outside? You'll need to use the right selector to find it.
Moin Zaman