Javascript

[davy_yg]

Hello,

I write the following javascript codes.

<script>

$(document).ready(function(){
  $("input").focus(function(){
    $(this).css("background-color","#fbecc5");
  });
  $("input").blur(function(){
    $(this).css("background-color","#f5f5f5");
  });

   $("textarea").focus(function(){
    $(this).css("background-color","#fbecc5");
  });
  $("textarea").blur(function(){
    $(this).css("background-color","#f5f5f5");
  });
});


</script>

Only to put the effect on <div id="carticle3">, not on other input form, such as the navigation search input box. How to write the javascript code so that it's only affecting the targeted input box ?

<div id="carticle3">

<div id="title">Your Message: </div><br><br>
<input type="text" name="name" placeholder="Your name" value=""><br>
<input type="text" name="email" placeholder="Your email" value=""><br>
<input type="text" name="subject" placeholder="subject" value=""><br>
<textarea rows="4" cols="20" placeholder="Message">

[JorgeM]

If you only want to affect a specific element use a different selector. The selectors you are using affect the elements of that type. For example, this code affects all elements of type input.

 $("input").focus(function(){
     $(this).css("background-color","#fbecc5");
 });

However, if you assign an ID to an input element and then modify the jQuery selector, you can target one specific item. For example...

 $("#inputID").focus(function(){ ... });

[davy_yg]

I try this:

<script>

$("#inputID").ready(function(){
  $("input").focus(function(){
    $(this).css("background-color","#fbecc5");
  });
  $("input").blur(function(){
    $(this).css("background-color","#f5f5f5");
  });

   $("textarea").focus(function(){
    $(this).css("background-color","#fbecc5");
  });
  $("textarea").blur(function(){
    $(this).css("background-color","#f5f5f5");
  });
});


</script>




<div id="inputID">
<div id="title">Your Message: </div><br><br>
<input type="text" name="name" placeholder="Your name" value=""><br>
<input type="text" name="email" placeholder="Your email" value=""><br>
<input type="text" name="subject" placeholder="subject" value=""><br>
<textarea rows="4" cols="20" placeholder="Message"></textarea><br><br>
<input type="submit" name="submit" value="kirim" class="button">
</div>

</div>

I wonder why other input textbox still being affected by the javascript.

[minitauros]

Maybe you could try this:

$("#inputID").ready(function(){
    $("#inputID input").focus(function(){
        $(this).css("background-color","#fbecc5");
    });

    $("#inputID input").blur(function(){
        $(this).css("background-color","#f5f5f5");
    });

    $("#inputID textarea").focus(function(){
        $(this).css("background-color","#fbecc5");
    });

    $("#inputID textarea").blur(function(){
        $(this).css("background-color","#f5f5f5");
    });
});

I've added "#inputID" to all your jQuery selectors, so that only the inputs inside div#inputID are affected.

[davy_yg]

contactus.php

<link href= "css/contact.css" rel="stylesheet" type="text/css" media="screen"> 
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js"></script>

<script>

$("#inputID").ready(function(){
  $("#inputID input").focus(function(){
    $(this).css("background-color","#fbecc5");
  });
  $("#inputID input").blur(function(){
    $(this).css("background-color","#f5f5f5");
  });

   $("#inputID textarea").focus(function(){
    $(this).css("background-color","#fbecc5");
  });
  $("#inputID textarea").blur(function(){
    $(this).css("background-color","#f5f5f5");
  });
});


</script>
</head>

<?php include('includes/navigation.php'); ?>

contact.css

input[type="text"], textarea {
    width:12em;
    border-radius:2px;
    border: solid 1px #ccc;
    padding:0.4em;
    background-color: #ececeb;
    box-shadow: inset 1px 1px 1px rgba(0,0,0,0);
    color: gray;
    font-family: tahoma;
    font-size: 12;
}

textarea {
    width:14em;
    border-radius:2px;
    border: solid 1px #ccc;
    padding:0.4em;
    background-color: #ececeb;
    box-shadow: inset 1px 1px 1px rgba(0,0,0,0);    
    font-family: tahoma;
    font-size: 12;
}   

Looks like my <?php include('includes/navigation.php'); ?> still being affected by the contact.css input . I have to leave it on however since I have another form in contactus.php besides the navigation.

[davy_yg]

I finally figure the solution

contact.css

#inputID input[type="text"], textarea {
    width:12em;
    border-radius:2px;
    border: solid 1px #ccc;
    padding:0.4em;
    background-color: #ececeb;
    box-shadow: inset 1px 1px 1px rgba(0,0,0,0);
    color: gray;
    font-family: tahoma;
    font-size: 12;
}

#inputID textarea {
    width:14em;
    border-radius:2px;
    border: solid 1px #ccc;
    padding:0.4em;
    background-color: #ececeb;
    box-shadow: inset 1px 1px 1px rgba(0,0,0,0);    
    font-family: tahoma;
    font-size: 12;
}   

Thanks.