# [SOLVED][JAVASCRIPT] setting class of an element using function



## Faun (Jun 21, 2012)

I have this input element with id "*sku*"

I am using this function


```
sku.keyup(function(){
	if($("#sku").val().length < 4)
	{
		$("#sku").attr("class","error");
	}else
	{
		$("#sku").attr("class","ok");
	
	}
})
```


```
$('#sku').blur(function(){
	
	if($("#sku").val().length < 4)
	{
		$('#sku').attr("class","error");
	}else
	{
		$('#sku').attr("class","ok");
	
	}

})
```

I'd like to use the same function for other elements too. How do I remove the hardcoded $("#sku") and make it generic so that I can pass any variable and the $("#sku") will be replaced by that variable ?

I am using jquery too.


----------



## masterkd (Jun 21, 2012)

in place of $('#sku') you can use two things:

1. you can add a class (say class="edit") and change $('#sku') to $('.edit')
2. you also can add elements like for <p> change $('#sku') to $('p')


----------



## abhidev (Jun 21, 2012)

make use of class names like 'add_blur'....and add that class to the elements where you want to attach the events and then 

$('.add_blur').blur(function(){
	............
        ............
})


----------



## Faun (Jun 21, 2012)

Ok, so I modified the code to this:

```
$(".notempty").blur(function(){
	
	if($(this).val().length < 4)
	{
		$(this).attr("class","error");
		$("#skuinfo").attr("class","error");
		$("#skuinfo").html("less than 4 chars");
	}else
	{
		$(this).attr("class","ok");
		$("#skuinfo").attr("class","ok");
		$("#skuinfo").html("it is okay now");
	}

})

$(".notempty").keyup(function(){
	
	if($(this).val().length < 4)
	{
		$(this).attr("class","error");
		$("#skuinfo").attr("class","error");
		$("#skuinfo").html("less than 4 chars");
	}else
	{
		$(this).attr("class","ok");
		$("#skuinfo").attr("class","ok");
		$("#skuinfo").html("it is okay now");
	}

})
```

but now the problem is with the text display in SPAN tag (with id #skuinfo and so on other different ids for other input elements). SPAN element is after each INPUT element, so that for that INPUT element the text information can be displayed.

What should be the course to display the text for the corresponding INPUT field only.

Here the for any INPUT field the text is displayed in the first SPAN field beside first INPUT field.


----------



## masterkd (Jun 21, 2012)

could you please post your html..will make it easy to understand where and what to modify!!


----------



## abhidev (Jun 21, 2012)

post your html structure...

i am assuming it to be something like this....

<p><input type="text" class="notempty" /><span class="error">Field cannot be empty</span></p>

the js would be like this...
$(".notempty").blur(function(){ 

    if($(this).val().length < 4) 
    { 
         var _this = $(this),
              errorBox = _this.parent().find('span');
        _this.attr("class","error"); 
        errorBox.attr("class","error").html("less than 4 chars"); 
    }else 
    { 
        _this.attr("class","ok"); 
        errorBox.attr("class","ok").html("it is okay now"); 
    } 

})


----------



## Faun (Jun 21, 2012)

*Ok it's done. Thanks masterkd and abhidev *

This is the code:

```
$(".notempty").blur(function(){
	
	if($(this).val().length < 4)
	{
		$(this).attr("class","error");
		$(this).next().attr("class","error");
		$(this).next().html("less than 4 chars");
	}else
	{
		$(this).attr("class","ok");
		$(this).next().attr("class","ok");
		$(this).next().html("it is okay now");
	}

})

$(".notempty").keyup(function(){
	
	if($(this).val().length < 4)
	{
		$(this).attr("class","error");
		$(this).next().attr("class","error");
		$(this).next().html("less than 4 chars");
	}else
	{
		$(this).attr("class","ok");
		$(this).next().attr("class","ok");
		$(this).next().html("it is okay now");
	}

})
```

HTML is like this.

```
<br /><label for="sku" >SKU of the product:</label><br />
	<input class="notempty" id="sku" name="sku" type="text" size="40" value="<?php if (!empty($sku)) echo $sku; ?>" />
	<span id="skuinfo">  </span>
	
	<br /><label for="name">Name of the product:</label><br />
	<input class="notempty" id="name" name="name" type="text" size="100" value="<?php if (!empty($name)) echo $name; ?>" />
	<span id="nameinfo"></span>
```


----------



## abhidev (Jun 22, 2012)

cool!!!


----------

