[midasxl]

Consider the following:

<form>
<div id="poc1">
<input type="text" name="Last_Name" class="Last_Name">
<input type="text" name="First_Name" class="First_Name">
<input type="text" name="Middle_Initial" class="Middle_Inital">
</div><!-- close poc1 -->
</form>

I have some jquery that clones the above div, and reassigns the div id to poc2, which results in:

<form>
<div id="poc1">
<input type="text" name="Last_Name" class="Last_Name">
<input type="text" name="First_Name" class="First_Name">
<input type="text" name="Middle_Initial" class="Middle_Inital">
</div><!-- close poc1 -->
<div id="poc2">
<input type="text" name="Last_Name" class="Last_Name">
<input type="text" name="First_Name" class="First_Name">
<input type="text" name="Middle_Initial" class="Middle_Inital">
</div><!-- close poc2 -->
</form>

I have a jquery keyup function targeting the class of the input fields:

$('.Last_Name').keyup(function(){
//my code here
}

Problem is, when I type in the input fields of poc1, it also affects the input fields of poc2, which makes total sense to me. But, I would like to only target the input fields of poc1. Can i do this by targeting the class using some kind of cascade?

I have tried:

$('#poc1 .Last_Name').keyup(function(){
//my code here
}
$('#poc1 > input.Last_Name').keyup(function(){
//my code here
}

It still hits the input field of BOTH divs.

Thanks for any suggestions!

Cheers!

[Jstall]

Hi,

What type of functionality are you going for with the event handler?

If you are trying to access something about that specific element you can still use your class selector and use $(this) inside your function to refer to the specific input that fired the event:

$('.Last_Name').keyup(function(){
  //example, show the length of text in the input
  alert($(this).val().length);
});

[midasxl]

Sorry, I should have been a tad more thorough with my explanation. I was attempting to scale down the example for simplicity and I think I left out some vital information. Let's try again.

<form>
<div id="poc1">
<span class="lname error"><input type="text" name="Last_Name" class="Last_Name"></span>
<span class="fname error"><input type="text" name="First_Name" class="First_Name"></span>
<span class="mi error"><input type="text" name="Middle_Initial" class="Middle_Inital"></span>
</div><!-- close poc1 -->
</form>

Then after a clone (with a div id renaming):

<form>
<div id="poc1">
<span class="lname error"><input type="text" name="Last_Name" class="Last_Name"></span>
<span class="fname error"><input type="text" name="First_Name" class="First_Name"></span>
<span class="mi error"><input type="text" name="Middle_Initial" class="Middle_Inital"></span>
</div><!-- close poc1 -->
<div id="poc2">
<span class="lname error"><input type="text" name="Last_Name" class="Last_Name"></span>
<span class="fname error"><input type="text" name="First_Name" class="First_Name"></span>
<span class="mi error"><input type="text" name="Middle_Initial" class="Middle_Inital"></span>
</div><!-- close poc2 -->
</form>

The jquery:

$('.Last_Name').keyup(function(){
var lnameLen = $(this).val().length;
if(lnameLen > 2){
if($('.lname').hasClass('error'){
$('.lname').removeClass('error').addClass('check');
}
}
});

Hope this makes the explanation a bit more clear. As you can see, the keyup tracks the length of the input on each keyup, and when it passes the threshold of '2', it targets the span element (class="lname") and changes its 'error' class to a 'check' class.

And the problem is: When I am entering information into the Last Name input of EITHER div, and trigger the class change, it affects the 'lname' span tag in BOTH divs. I will mess around with $(this) as you suggested; see what I can come up with.

Cheers!

[Jstall]

Hi,

You can do little DOM traversal to find the proper .lname span. It looks like your span tag wraps your input so .parent() should do it.

Something like this:

$('.Last_Name').keyup(function(){
	var lnameLen = $(this).val().length;
	if(lnameLen > 2){
		var span = $(this).parent();
		if($(span).hasClass('error'){
			$(span).removeClass('error').addClass('check');
		}
	}
});

Should do what you are looking for

[midasxl]

Sorry it took me awhile to resolve this one. Here is my solution:

var pocNum = $('.pocSection > div').length;//appears early in the logic

newPoc.find('.LastName').bind("keyup", function(e){
var lnameLen = $(this).val().length;
if(lnameLen > 2){
if($('#poc' + (pocNum) + ' .lname').hasClass('error')){
$('#poc' + (pocNum) + ' .lname').removeClass('error').addClass('check');
);
if($('#poc' + (pocNum) + ' .lname').hasClass('showError')){
$('#poc' + (pocNum) + ' .lname').removeClass('showError').addClass('check');
);
}
});

I'm using the cascade and the unique id's to target the desired element. Possibly a more elegant solution, but it seems to work for now. Thanks!