CODEWITHSUNDEEP
javascripthtmljquerycss
ggs
ggs

Reputation: 19

Changing the form field background color with jquery

I have this small code and I am trying to change the background color of the field when I click on it to write, for example if I click in "email" field I want the field to turn yellow so it looks better. I searched but I don't know I couldnt find a soultion becuase I am not really familar with jquery.

<div class="content">
    <div class="row">
    <div class="left">First name</div>
    <div class="right"><input name="Text1" type="text" class="text" /></div>
    <div class="clear"></div>
    </div>
    <div class="row">
    <div class="left">Last name</div>
    <div class="right"><input name="Text1" type="text" class="text" /></div>
    <div class="clear"></div>
    </div>
    <div class="row">
    <div class="left">Email</div>
    <div class="right"><input name="Text1" type="text" class="text" /></div>
    <div class="clear"></div>
    </div>
    <div class="row">
    <div class="left">Password</div>
    <div class="right"><input name="Text1" type="text" class="text" /></div>
    <div class="clear"></div>
    </div>
    </div>

jquery

$(document).ready(function()
   {
   $('.left, .content input, .content textarea, .content select').focus(function(){
   $(this).parents('.row').addClass("over");
   }).blur(function(){
   $(this).parents('.row').removeClass("over");
   });
   });

css

body{
    font-family:Arial, Helvetica, sans-serif;
    font-size: 13px;
    }
    .content{
    padding:10px;
    width:370px
    }
    .left{
    width:150px;
    float:left;
    padding:7px 0px 0px 7px;
    min-height:24px;
    }
    .right{
    width:200px;
    float:left;
    padding:5px;
    min-height:24px;
    }
    .clear{
    float:none;
    clear:both;
    height:0px;
    }
    .row{
    background-color:none;
    display:block;
    min-height:32px;
    }
    .text{
    width:190px;
    }
    .ruler{
    width:400px; border-bottom:dashed 1px #dcdcdc;
    }
    tr:focus{
    background-color:#fcfcf0;
    }
    td{
    vertical-align:top;
    }
    .over{
    background-color:#f0f0f0;
    }
    .out{
    background-color:none;
    }

Whoever can help me with the solution, thanks a lot.

Upvotes: 1

Views: 62

Answers (3)

Bhautik
Bhautik

Reputation: 11282

You can get email type and add class based on that

JQuery

if( $(this).attr("type") == 'email' ){
    $(this).parents('.row').addClass("email");
}

CSS

.over.email{
    background-color:#FFFF00;
}


$(document).ready(function(){
   $('.left, .content input, .content textarea, .content select').focus(function(){
      $(this).parents('.row').addClass("over");
      if( $(this).attr("type") == 'email' ){
          $(this).parents('.row').addClass("email");
      }
   }).blur(function(){
      $(this).parents('.row').removeClass("over");
      if( $(this).attr("type") == 'email' ){
          $(this).parents('.row').removeClass("email");
      }
   });
});
body{
    font-family:Arial, Helvetica, sans-serif;
    font-size: 13px;
    }
    .content{
    padding:10px;
    width:370px
    }
    .left{
    width:150px;
    float:left;
    padding:7px 0px 0px 7px;
    min-height:24px;
    }
    .right{
    width:200px;
    float:left;
    padding:5px;
    min-height:24px;
    }
    .clear{
    float:none;
    clear:both;
    height:0px;
    }
    .row{
    background-color:none;
    display:block;
    min-height:32px;
    }
    .text{
    width:190px;
    }
    .ruler{
    width:400px; border-bottom:dashed 1px #dcdcdc;
    }
    tr:focus{
    background-color:#fcfcf0;
    }
    td{
    vertical-align:top;
    }
    .over{
    background-color:#f0f0f0;
    }
    .over.email{
    background-color:#FFFF00;
    }
    .out{
    background-color:none;
    }
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="content">
    <div class="row">
    <div class="left">First name</div>
    <div class="right"><input name="Text1" type="text" class="text" /></div>
    <div class="clear"></div>
    </div>
    <div class="row">
    <div class="left">Last name</div>
    <div class="right"><input name="Text1" type="text" class="text" /></div>
    <div class="clear"></div>
    </div>
    <div class="row">
    <div class="left">Email</div>
    <div class="right"><input name="Text1" type="email" class="text" /></div>
    <div class="clear"></div>
    </div>
    <div class="row">
    <div class="left">Password</div>
    <div class="right"><input name="Text1" type="text" class="text" /></div>
    <div class="clear"></div>
    </div>
    </div>

Upvotes: 2

danicotra
danicotra

Reputation: 1433

You've done it right, just change the CSS rule, like this for instance:

.over{
background-color:#ffff00;
}

Upvotes: 1

Hrahat Tahmazyan
Hrahat Tahmazyan

Reputation: 81

You can bind an event handler to the "focus" for only the email input, for example:

$(document).ready(function () {
    $('[name=email]').focus(function () {
      $(this).parents('.row').addClass("over");
    }).blur(function () {
      $(this).parents('.row').removeClass("over");
    });
  });

Upvotes: 0

Related Questions