jquery function not working

Question

0.00/5 (No votes)

See more:

hello,

i have made one jquery function, in which when we focus on textbox its background color should change, but its not working have a look on my code

HTML

<script type="text/javascript" src="jquery/jQueryv1.9.1.js"></script>
<script type="text/javascript">
$(document).ready(function(){
$('TextBox').focus(function(){
$(this).css('background-color', '#cccccc');
});
});
</script>

 <asp:TextBox ID="TextBox1" runat="server" CssClass="TextBox" meta:resourcekey="TextBox1Resource1"></asp:TextBox>

help will be highly appreciated

Posted 28-Mar-13 23:01pm

ankitsrist

Updated 28-Mar-13 23:10pm

Sandeep Mewara

v2

Add a Solution

2 solutions

Solution 2

Solution 1 is perfect solution for your Question..
Also you can use blur instead of focusout... See example below..

JavaScript

<script type="text/javascript">
$(document).ready(function()
{
    $('.txtbox_focus').focus(function()
    {
        $(this).css("background-color","#cccccc");
    });
    $('.txtbox_focus').blur(function()
    {
        $(this).css("background-color","#ffffff");
    });
});
</script>

html below..

ASP.NET

<asp:textbox id="TextBox1" runat="server" class="txtbox_focus" xmlns:asp="#unknown"></asp:textbox>

Hope it helps you...

Posted 29-Mar-13 20:06pm

vinodkumarnie

Comments

ankitsrist 30-Mar-13 2:20am

yes vinod sir, i tried that also its works, thank u so much

vinodkumarnie 30-Mar-13 3:18am

Welcome.. :-) If the given answer satisfied to you please accept the answer.. It will help us to give better solutions..

Add a Solution

Add your solution here

Treat my content as plain text, not as HTML

Preview 0

…

Existing Members

Sign in to your account

...or Join us

Download, Vote, Comment, Publish.

Your Email
Password
Forgot your password?

Your Email
This email is in use. Do you need your password?
Optional Password

I have read and agree to the Terms of Service and Privacy Policy
Please subscribe me to the CodeProject newsletters

When answering a question please:

Read the question carefully.
Understand that English isn't everyone's first language so be lenient of bad spelling and grammar.
If a question is poorly phrased then either ask for clarification, ignore it, or edit the question and fix the problem. Insults are not welcome.
Don't tell someone to read the manual. Chances are they have and don't get it. Provide an answer or move on to the next question.

Let's work to help developers, not make them feel stupid.

This content, along with any associated source code and files, is licensed under The Code Project Open License (CPOL)

Sandeep Mewara · Accepted Answer · 2013-03-28T23:14:00

Solution 1

Few things:
1. Never use keywords as ID or variable names (here you have used TextBox). You never know when they cause the issue
2. You used 'TextBox' as selector which is a class name but the way you have used is not right.

Try:

JavaScript

$(document).ready(function(){
   $(".TextBox").focus(function(){
       $(this).css('background-color', '#cccccc');
   });
});

Refer:
http://api.jquery.com/category/selectors/[^]
http://www.w3schools.com/jquery/jquery_ref_selectors.asp[^]

Posted 28-Mar-13 23:14pm

Sandeep Mewara

Comments

ankitsrist 29-Mar-13 5:55am

thanks sandeep sir, its now working but now one another issue actualy when i remove focus from control its background colour still unchanged...why this is happen

Sandeep Mewara 29-Mar-13 6:04am

Because based on current code, once applied on focus it will persist.

If you want to reset then put that code to for onfocusout.

ankitsrist 29-Mar-13 6:15am

thank u so much sandeep sir you made it done
now my code is like this

$(document).ready(function(){
$('input').focus(function(){
$(this).css('background-color', '#cccccc');
});
});
$(document).ready(function(){
$('input').focusout(function(){
$(this).css('background-color', '#FFFFFF')
});
});

Sandeep Mewara 29-Mar-13 9:49am

Welcome. Good to know it helped.