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

[Faun]

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]

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]

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]

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]

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

 

[abhidev]

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]

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]

cool!!!