We Keep Coding

No same value picked for multiple input range slider

I would like to control all slider value in a function where no same number is picked twice for the slider value and if it's picking the same number, the slider should show an error and only if all slider contains a different value, it'll proceed to show the next button. But I don't know what value should I refer to check if the value is already used. I tried looping the array but it just doesn't make that much sense and not work at all
import React from 'react'
import subjectCategories from './categories';
export default function InterestScore() {
const[range,setRange]=React.useState(
{cyberSecurity:"1",
projectManager:"1",
developer:"1",
productManager:"1",
devOps:"1",
marketer:"1",
designer:"1",
writer:"1"}
);
function handleChange(e) {
setRange(prevRange=>{
return (
{...prevRange, [e.target.name]:e.target.value}
)
})
for(let i=0;i<8;i++) {
if(range[e.target.name]===e.target.value) {
console.log("cannot pick same number twice");
}
}
}
for (let e of document.querySelectorAll('input[type="range"].slider-progress')) {
e.style.setProperty('--value', e.value);
e.style.setProperty('--min', e.min == '' ? '1' : e.min);
e.style.setProperty('--max', e.max == '' ? '10' : e.max);
e.addEventListener('input', () => e.style.setProperty('--value', e.value));
}
return (
<div className='interest_score'>
<div className='q_card'>
<p>Score your level of interest in these job titles:</p>
<div className='range_container'>
{subjectCategories && subjectCategories.map((category) => {
return (
<div className='category_group' key={category.id}>
<div className='labels'>
<label className='range_label'>{category.subject}</label>
<span>{range[category.name]}/10</span>
</div>
<input type='range' min='1' max='10' name={category.name}
className='styled-slider slider-progress'
onChange={(e)=>handleChange(e)} value={range[category.name]}/>
</div>
);
})}
</div>
<p>* You cannot pick a number twice</p>
<button className='next'>Next</button>
</div>
</div>
)
}
const subjectCategories = [
{id:1,subject:"Cyber Security",name:"cyberSecurity"},
{id:2,subject:"Project Manager",name:"projectManager"},
{id:3,subject:"Developer",name:"developer"},
{id:4,subject:"Product Manager",name:"productManager"},
{id:5,subject:"DevOps",name:"devOps"},
{id:6,subject:"Marketer",name:"marketer"},
{id:7,subject:"Designer",name:"designer"},
{id:8,subject:"Writer",name:"writer"}
]
export default subjectCategories;
.interest_score {
margin:5rem 1rem 0 7rem;
}
.interest_score p {
text-align:left;
padding:1em 3em;
}
.range_container {
margin-top:0.5em;
padding:0.5em 2em;
color:#ACB7EB;
font-size:14px;
display:flex;
flex-wrap:wrap;
justify-content:space-between;
align-items:center;
}
.category_group {
display:flex;
flex-direction:column;
align-items:flex-start;
flex:1 0 45%;
padding:1.5em 1em;
}
.range_container label {
width:100%;
text-align:left;
}
.labels {
display:flex;
justify-content:space-between;
width:100%;
}
.labels span {
color:black;
}
.q_card p:nth-of-type(2){
color:#ACB7EB;
}
/*generated with Input range slider CSS style generator (version 20211225)
https://toughengineer.github.io/demo/slider-styler*/
input[type=range].styled-slider {
height: 1.8em;
width:100%;
-webkit-appearance: none;
}
/*progress support*/
input[type=range].styled-slider.slider-progress {
--range: calc(var(--max) - var(--min));
--ratio: calc((var(--value) - var(--min)) / var(--range));
--sx: calc(0.5 * 1.4em + var(--ratio) * (100% - 1.4em));
}
input[type=range].styled-slider:focus {
outline: none;
}
/*webkit*/
input[type=range].styled-slider::-webkit-slider-thumb {
-webkit-appearance: none;
width: 1.4em;
height: 1.4em;
border-radius: 50%;
background: #FFFFFF;
border: 4px solid rgba(204, 65, 116, 0.6);
box-shadow: 3px 3px 6px rgba(0, 0, 0, 0.2);
margin-top: calc(max((1em - 1px - 1px) * 0.5,0px) - max(1.4em * 0.5,4px));
}
input[type=range].styled-slider::-webkit-slider-runnable-track {
height: 10px;
border: 1px solid #b2b2b2;
border-radius: 0.5em;
background: #EFEFEF;
box-shadow: none;
}
input[type=range].styled-slider::-webkit-slider-thumb:hover {
background: rgba(241, 243, 253, 1);
}
input[type=range].styled-slider:hover::-webkit-slider-runnable-track {
background: #E5E5E5;
border-color: #9a9a9a;
}
input[type=range].styled-slider::-webkit-slider-thumb:active {
background: rgba(241, 243, 253, 1);
}
input[type=range].styled-slider:active::-webkit-slider-runnable-track {
background: #F5F5F5;
border-color: #c1c1c1;
}
input[type=range].styled-slider.slider-progress::-webkit-slider-runnable-track {
background: linear-gradient(90deg, #800165 0%, #D3014E 100%) 0/var(--sx) 100% no-repeat, #EFEFEF;
}
input[type=range].styled-slider.slider-progress:hover::-webkit-slider-runnable-track {
background: linear-gradient(90deg, #800165 0%, #D3014E 100%) 0/var(--sx) 100% no-repeat, #E5E5E5;
}
input[type=range].styled-slider.slider-progress:active::-webkit-slider-runnable-track {
background: linear-gradient(90deg, #800165 0%, #D3014E 100%) 0/var(--sx) 100% no-repeat, #F5F5F5;
}
/*mozilla*/
input[type=range].styled-slider::-moz-range-thumb {
width: max(calc(1.4em - 4px - 4px),0px);
height: max(calc(1.4em - 4px - 4px),0px);
border-radius: 50%;
background: #FFFFFF;
border: 4px solid rgba(204, 65, 116, 0.6);
box-shadow: 3px 3px 6px rgba(0, 0, 0, 0.2);
}
input[type=range].styled-slider::-moz-range-track {
height: max(calc(1em - 1px - 1px),0px);
border: 1px solid #b2b2b2;
border-radius: 0.5em;
background: #EFEFEF;
box-shadow: none;
}
input[type=range].styled-slider::-moz-range-thumb:hover {
background: #FFFFFF;
}
input[type=range].styled-slider:hover::-moz-range-track {
background: #E5E5E5;
border-color: #9a9a9a;
}
input[type=range].styled-slider::-moz-range-thumb:active {
background: #FFFFFF;
}
input[type=range].styled-slider:active::-moz-range-track {
background: #F5F5F5;
border-color: #c1c1c1;
}
input[type=range].styled-slider.slider-progress::-moz-range-track {
background: linear-gradient(90deg, #800165 0%, #D3014E 100%) 0/var(--sx) 100% no-repeat, #EFEFEF;
}
input[type=range].styled-slider.slider-progress:hover::-moz-range-track {
background: linear-gradient(90deg, #800165 0%, #D3014E 100%) 0/var(--sx) 100% no-repeat, #E5E5E5;
}
input[type=range].styled-slider.slider-progress:active::-moz-range-track {
background: linear-gradient(90deg, #800165 0%, #D3014E 100%) 0/var(--sx) 100% no-repeat, #F5F5F5;
}
/*ms*/
input[type=range].styled-slider::-ms-fill-upper {
background: transparent;
border-color: transparent;
}
input[type=range].styled-slider::-ms-fill-lower {
background: transparent;
border-color: transparent;
}
input[type=range].styled-slider::-ms-thumb {
width: 1.4em;
height: 1.4em;
border-radius: 50%;
background: #FFFFFF;
border: 4px solid rgba(204, 65, 116, 0.6);
box-shadow: 3px 3px 6px rgba(0, 0, 0, 0.2);
margin-top: 0;
box-sizing: border-box;
}
input[type=range].styled-slider::-ms-track {
height: 1em;
border-radius: 0.5em;
background: #EFEFEF;
border: 1px solid #b2b2b2;
box-shadow: none;
box-sizing: border-box;
}
input[type=range].styled-slider::-ms-thumb:hover {
background: #FFFFFF;
}
input[type=range].styled-slider:hover::-ms-track {
background: #E5E5E5;
border-color: #9a9a9a;
}
input[type=range].styled-slider::-ms-thumb:active {
background: #FFFFFF;
}
input[type=range].styled-slider:active::-ms-track {
background: #F5F5F5;
border-color: #c1c1c1;
}
input[type=range].styled-slider.slider-progress::-ms-fill-lower {
height: max(calc(1em - 1px - 1px),0px);
border-radius: 0.5em 0 0 0.5em;
margin: -1px 0 -1px -1px;
background: linear-gradient(90deg, #800165 0%, #D3014E 100%);
border: 1px solid #b2b2b2;
border-right-width: 0;
}
input[type=range].styled-slider.slider-progress:hover::-ms-fill-lower {
background: linear-gradient(90deg, #800165 0%, #D3014E 100%);
border-color: #9a9a9a;
}
input[type=range].styled-slider.slider-progress:active::-ms-fill-lower {
background: linear-gradient(90deg, #800165 0%, #D3014E 100%);
border-color: #c1c1c1;
}

You can check if there are duplicate range values on different sliders like this:
const currentValues = Object.values(range);
const uniqueRangeValues = [...new Set(currentValues)];
const hasError = currentValues.length !== uniqueRangeValues.length;
And you get the hasError variable and use it in jsx like this:
{hasError ? (
<p>* You cannot pick a number twice</p>
) : (
<button className="next">Next</button>
)}
You can take a look at this sandbox for a live working example of this solution.

If 2 different radios are selected, Do something

I essentially have 1 radio selection with a few colours, all with the same attributes, just different values, using an onclick event to pass on the value. worked great, it would allow the user to click on a color(radio) and it would display an image.
Working fiddle - https://jsfiddle.net/ktmzy8L0/
The above now includes another radio selection called pattern. But every where I searched cant seem to find an answer to solve this.
Essential - If the user selects 2 separate radios [different names], show a different picture. If you are following the jsfiddle it would show a blue diamond(I would use a url to show the image depending on the 2 radio values they choose) and the image would popup in showpicture.
The below code I originally have for jquery
function CB(colorbackground) {
var url;
$('#showpictureheader').show();
$('#showpicture').show();
if (colorbackground == "Navy Blue") {
url = "https://www.colorhexa.com/023333.png";
document.getElementById("showpicture").style.backgroundImage = "url(" + url + ")";
$('#showpictureheader').text('Navy Blue Pattern');
}
}

This code makes it more dynamic. Simply add data-color='ff0000' to the bg color radio buttons. Then this code will simply take the selected pattern value and bg color radio and show the title and selected bgcolor.
bgcolor = "";
pattern = "";
$("input[type='radio']").on("change",function(){
if($(this).prop("name") == "properties[Background Color]"){
bgcolor = $(this);
}
else if($(this).prop("name") == "properties[Background Pattern]"){
pattern = $(this);
}
if(bgcolor && pattern){
$('#showpictureheader').show();
$('#showpicture').show();
url = "https://www.colorhexa.com/" + bgcolor.data("color") + ".png";
document.getElementById("showpicture").style.backgroundImage = "url(" + url + ")";
$('#showpictureheader').text(bgcolor.val() + ' ' + pattern.val());
}
});
.background-choices label>input {
visibility: hidden;
position: absolute;
}
.background-choices label>input+img {
cursor: pointer;
border: 1px solid transparent;
border-radius: 50%;
width: 30px;
height: 30px;
margin: 0 10px;
-webkit-box-shadow: 0 1px 5px 0 rgba(0, 0, 0, 0.35);
-moz-box-shadow: 0 1px 5px 0 rgba(0, 0, 0, 0.35);
box-shadow: 0 1px 5px 0 rgba(0, 0, 0, 0.35);
}
#media only screen and (min-width: 500px) {
.background-choices label>input+img {
border: 2px solid transparent;
width: 40px;
height: 40px;
}
}
.background-choices label>input:checked+img {
border: 5px solid #fd8252;
}
.background-choices label>input:not(:checked)+img {
border: 5px solid #f4f5f5;
}
.background-choices label:hover {
opacity: 0.6;
}
.background-tab-wrapper h3 {
margin-top: 10px;
}
#showpictureheader {
display: none;
}
.showpictureheader{
text-align: center;
padding-bottom: 10px;
}
#showpicture {
border: 5px solid #f4f5f5;
cursor: pointer;
border-radius: 20px;
width: 250px;
height: 250px;
margin: 10px 10px;
-webkit-box-shadow: 0 1px 5px 0 rgba(0, 0, 0, 0.35);
-moz-box-shadow: 0 1px 5px 0 rgba(0, 0, 0, 0.35);
box-shadow: 0 1px 5px 0 rgba(0, 0, 0, 0.35);
margin: auto;
display: none;
background-size: contain;
}
<div class="background-choices">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
<h3>Color</h3>
<label>
<input data-color="000080" id="background-choice-input1" type="radio" name="properties[Background Color]" class="background-choices-selector" value="Navy Blue"/>
<img src="https://www.colorhexa.com/000080.png">
</label>
<h3>Pattern</h3>
<label>
<input id="background-choice-input2" type="radio" name="properties[Background Pattern]" value="Diamond"/>
<img src="https://w7.pngwing.com/pngs/884/524/png-transparent-diamond-rhombus-shape-oval-outline-s-blue-angle-white-thumbnail.png">
</label>
</div>
<div class="showpictureheader">
<h7 id="showpictureheader"></h7>
</div>
<div id="showpicture">
</div>

here is, you should separate to one more function.
function CB(bg) {
var url;
$('#showpictureheader').show();
$('#showpicture').show();
if (bg == "Navy Blue") {
url = "https://www.colorhexa.com/023333.png";
document.getElementById("showpicture").style.backgroundImage = "url(" + url + ")";
}
}
function secondcb() {
$('#showpictureheader').text('Navy Blue Pattern');
}
.background-choices label>input {
visibility: hidden;
position: absolute;
}
.background-choices label>input+img {
cursor: pointer;
border: 1px solid transparent;
border-radius: 50%;
width: 30px;
height: 30px;
margin: 0 10px;
-webkit-box-shadow: 0 1px 5px 0 rgba(0, 0, 0, 0.35);
-moz-box-shadow: 0 1px 5px 0 rgba(0, 0, 0, 0.35);
box-shadow: 0 1px 5px 0 rgba(0, 0, 0, 0.35);
}
#media only screen and (min-width: 500px) {
.background-choices label>input+img {
border: 2px solid transparent;
width: 40px;
height: 40px;
}
}
.background-choices label>input:checked+img {
border: 5px solid #fd8252;
}
.background-choices label>input:not(:checked)+img {
border: 5px solid #f4f5f5;
}
.background-choices label:hover {
opacity: 0.6;
}
.background-tab-wrapper h3 {
margin-top: 10px;
}
#showpictureheader {
display: none;
}
.showpictureheader {
text-align: center;
padding-bottom: 10px;
}
#showpicture {
border: 5px solid #f4f5f5;
cursor: pointer;
border-radius: 20px;
width: 250px;
height: 250px;
margin: 10px 10px;
-webkit-box-shadow: 0 1px 5px 0 rgba(0, 0, 0, 0.35);
-moz-box-shadow: 0 1px 5px 0 rgba(0, 0, 0, 0.35);
box-shadow: 0 1px 5px 0 rgba(0, 0, 0, 0.35);
margin: auto;
display: none;
background-size: contain;
}
<div class="background-choices">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
<h3>Color</h3>
<label>
<input id="background-choice-input1" type="radio" name="properties[Background Color]" class="background-choices-selector" value="Navy Blue" onClick="CB(this.value);"/>
<img src="https://www.colorhexa.com/000080.png">
</label>
<h3>Pattern</h3>
<label>
<input onchange="secondcb()" id="background-choice-input2" type="radio" name="properties[Background Pattern]" value="Diamond"/>
<img src="https://w7.pngwing.com/pngs/884/524/png-transparent-diamond-rhombus-shape-oval-outline-s-blue-angle-white-thumbnail.png">
</label>
</div>
<div class="showpictureheader">
<h7 id="showpictureheader"></h7>
</div>
<div id="showpicture">
</div>

My href link buttons don't work online

I've just creted my first website in HTML5 and javascript and all the links work offline (double and triplechecked it), but when I uploaded it onto the host server, none of the links work. Could anyone give me any suggestions? Here's and example of my link buttons:
<div>
<center>
<button style="margin-top:10px;margin-bottom:10px;height:25px;width:100px;font-size:14px">Books</button>
</center>
</div>

You put an anchor tag inside a button. I assumed that you want to redirect the user if they click on the button. You can do something like this:
Example 1:
<button type="button">Click on me</button>
Example 2: (Recommended)
<button type="button" onclick="location.href='page.html'">Click on me</button>
I hope this will help you!

Or else you can also add anchor tag with css that makes it look like a button
Click on me
.btn:active {
position: relative;
top: 1px;
color: #fcd3a5;
background: -webkit-gradient(linear, left top, left bottom, from(#f47a20), to(#faa51a));
background: -moz-linear-gradient(top, #f47a20, #faa51a);
filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#f47a20', endColorstr='#faa51a');
}
.btn{
display: inline-block;
zoom: 1;
vertical-align: baseline;
margin: 0 2px;
outline: none;
cursor: pointer;
text-align: center;
text-decoration: none;
font: 14px/100% Arial, Helvetica, sans-serif;
padding: .5em 2em .55em;
text-shadow: 0 1px 1px rgba(0,0,0,.3);
-webkit-border-radius: .5em;
-moz-border-radius: .5em;
border-radius: .5em;
-webkit-box-shadow: 0 1px 2px rgba(0,0,0,.2);
-moz-box-shadow: 0 1px 2px rgba(0,0,0,.2);
box-shadow: 0 1px 2px rgba(0,0,0,.2);
color: #fef4e9;
border: solid 1px #da7c0c;
background: #f78d1d;
background: -webkit-gradient(linear, left top, left bottom, from(#faa51a), to(#f47a20));
background: -moz-linear-gradient(top, #faa51a, #f47a20);
filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#faa51a', endColorstr='#f47a20');
}
JSFiddle

Slide-in Call to Action div buggy on click and scroll down page

I have a div that on click will slide-in on the right but i am trying to also have it slide-in on scroll if it has not already been opened or open. So you can click the button to have it slide in or if closed as you scroll down he page it opens and then goes away after a few seconds or if button is clicked.
I sort of have it working but very buggy. Any help would be greatly appreciated!
http://jsfiddle.net/abennington/50tab7vh/2/
HTML:
<div class="floating-form" id="contact_form">
<div class="contact-opener">CTA Box Toggle</div>
<div class="contact_body">
<h3>This is a CTA Box</h3>
<p>On click it will slide out and on scroll it will scroll out as you get down the page and then go away.</p>
<i class="fa fa-calendar-o"></i> CTA Button
</div>
</div>
jQuery:
$(document).ready(function(){
var buttonhieght = $('.contact-opener').width()-52;
var popdiv = $('#contact_form').width();
var _scroll = true, _timer = false, _floatbox = $("#contact_form"), _floatbox_opener = $(".contact-opener") ;
_floatbox.css("right", "-"+ popdiv+"px"); //initial contact form position
_floatbox_opener.css("left", "-"+ buttonhieght+"px"); //initial contact form position
//Contact form Opener button
_floatbox_opener.click(function(){
if (_floatbox.hasClass('visiable')){
_floatbox.animate({'right': '-'+ popdiv+'px'}, {duration: 300}).removeClass('visiable');
}else{
_floatbox.animate({"right":"0px"}, {duration: 300}).addClass('visiable');
}
});
});
$(document).on('scroll', function() {
var popdiv = $('#contact_form').width();
var _floatbox = $("#contact_form");
var scrollTop = $(window).scrollTop();
if (scrollTop > 700) {
if (_floatbox.hasClass('visiable')){
_floatbox.animate({'right': '-'+ popdiv+'px'}, {duration: 300}).removeClass('visiable');
}else{
_floatbox.animate({"right":"0px"}, {duration: 300}).addClass('visiable');
}
}
})
CSS:
/* floating box style */
.floating-form * { color: #fff; }
.floating-form {
width:300px;
max-width: 300px;
top: 100px;
font: 13px Arial, Helvetica, sans-serif;
background: #F9F9F9;
background: #754c24;
color: #fff;
right: 10px;
position: fixed;
z-index: 1000;
box-shadow: -2px -0px 8px rgba(43, 33, 33, 0.06);
-moz-box-shadow: -2px -0px 8px rgba(43, 33, 33, 0.06);
-webkit-box-shadow: -2px -0px 8px rgba(43, 33, 33, 0.06);
}
.contact-opener {
position: absolute;
text-transform:uppercase;
left: -100px;
transform: rotate(-90deg);
top: 150px;
background-color: #754c24;
padding: 10px 15px;
color: #fff;
text-shadow: 1px 1px 1px rgba(0, 0, 0, 0.43);
cursor: pointer;
border-radius: 5px 5px 0px 0px;
-webkit-border-radius: 5px 5px 0px 0px;
-moz-border-radius: 5px 5px 0px 0px;
box-shadow: -2px -0px 8px rgba(43, 33, 33, 0.06);
-moz-box-shadow: -2px -0px 8px rgba(43, 33, 33, 0.06);
-webkit-box-shadow: -2px -0px 8px rgba(43, 33, 33, 0.06);
}
#contact_form .contact_body { padding: 30px 30px 10px 30px; }
#contact_form .contact_body h3 { margin: 0rem 0 1.0rem; }
#contact_form .contact_body ol { padding: 5px 0px 10px 20px; }
#contact_form .contact_body li { padding: 8px 0px; font-weight: 700; }
#contact_form .contact_body .btn-primary { background: rgba(35,26,19,0.9); margin-bottom: 20px; }

The issue is that the scroll handler is never detached, so the #contact_form keeps showing/hiding until all the scroll events have been "cleared." I've updated your fiddle such that it only tries to display the #contact_form once when the page is scrolled past a certain point, and then the scroll handler is removed.
I think this is what you want: http://jsfiddle.net/50tab7vh/3/

after you have clicked or hovered can you change state?

trying to make an input box do the following: normal sate the input box text is x, hover state the input text is y and was you leave the box its z and can stay z through all states again.
-update
have a search box which the background image and text are faded out, once you hover it is is vivid, once you focus it, it is vivid with a 2px border, but once you leave it i loose verything:( so need a trick to get it to stay vivid the background picture (of which there are x and y, one for each state) and the text but loose the 2px border
---UPDATE ---
/* Search box */
.searchbox {
background: url(../images/search-grey.gif) no-repeat 6px -5px #f8f8f8;
width:240px;
margin-right:4px;
margin-left:11px;
color:#cccccc;
vertical-align: top;
padding: 4px 2px 4px 79px;
border-color: #4FA4F9;
}
.searchbox:hover {
background: url(../images/search-greyb.gif) no-repeat 6px -5px #f8f8f8;
color:#888888;
}
.searchbox:focus {
background: url(../images/search-greyb.gif) no-repeat 5px -6px #ffffff;
width:239px;
color:#888888;
padding: 3px 2px 3px 78px;
}
.searchbox.blur {
background: url(../images/search-greyb.gif) no-repeat 6px -5px #ffffff;
width:239px;
color:#000000;
padding: 4px 2px 4px 79px;
}
#-moz-document url-prefix() {
.searchbox {
background: url(../images/search-grey.gif) no-repeat 6px -4px #f8f8f8;
}
}
#-moz-document url-prefix() {
.searchbox:hover {
background: url(../images/search-greyb.gif) no-repeat 6px -4px #f8f8f8;
}
}
#-moz-document url-prefix() {
.searchbox:focus {
background: url(../images/search-greyb.gif) no-repeat 5px -5px #f8f8f8;
}
}
input::-moz-focus-inner /*Remove button padding in FF*/
{
border: 0;
padding: 0;
}
input, select, textarea {
margin: 1 0 0;
}
input, textarea, .date {
border: 1px solid #aaa;
border-radius: 3px;
color:#333;
}
input {
font-size: 13px;
padding: 0px;
}
textarea {
font-family: Arial, Helvetica, sans-serif;
font-size: 13px;
padding: 4px 4px 4px 4px;
}
select:hover {border: 1px solid #4FA4F9;}
input:hover {border: 1px solid #4FA4F9;}
textarea:hover {border: 1px solid #4FA4F9;}
select:focus {padding: 0px;}
input:focus {padding: 0px;}
textarea:focus {padding: 3px 3px 3px 3px;
}
--- html ---
<input id="searchdomain" name='domain' type="text" style="font-size:15px;" class="searchbox"/>
---js----
/* Search Box Leave */
$(".searchbox").blur(function(){
$(this).addClass("blur");
});

You could do this using jQuery by setting a class.
$(".searchable").blur(function() {
$(this).addClass("blur");
});
Then in your css you can set the color like this
.searchable.blur
{
color:#000;
}
​
Here is a jsfiddle example -> http://jsfiddle.net/y46Wk/2/
Just bear in mind that the element won't show its hover color again unless you remove the class.

This isn't really an answer to your question.... but I have a feeling you're doing some validation on a form, so why not look at a jQuery validation plugin like this
http://docs.jquery.com/Plugins/Validation
Here is a list of other form related jQuery stuff
http://speckyboy.com/2010/06/22/50-jquery-plugins-for-form-functionality-validation-security-and-customisation/
If none of them help, perhaps you could tell us which one comes close to give us a bit of a clue as to what you want ;-)

Are you trying to do this: http://jsfiddle.net/akhurshid/y46Wk/4/

What you are describing (maintaining a state) is technically possible with just CSS.
Here is an article explaining the process.
In summary you use a transition state, triggered by focus, to keep styles applied to the element. I'm not advocating it as the best method, but it is really quite interesting to see what you can do with CSS3 properties.
More of a curiosity than a straight answer but hopefully its helpful to you / others who hit this question :)