4 Replies - 808 Views - Last Post: 21 November 2011 - 08:56 AM

#1 midasxl  Icon User is offline

  • D.I.C Head

Reputation: 2
  • View blog
  • Posts: 193
  • Joined: 03-December 08

keyup function targeting too many classes

Posted 03 November 2011 - 07:33 AM

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!

Is This A Good Question/Topic? 0
  • +

Replies To: keyup function targeting too many classes

#2 Jstall  Icon User is offline

  • Lurker
  • member icon

Reputation: 434
  • View blog
  • Posts: 1,042
  • Joined: 08-March 09

Re: keyup function targeting too many classes

Posted 03 November 2011 - 10:23 AM

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);
});


Was This Post Helpful? 0
  • +
  • -

#3 midasxl  Icon User is offline

  • D.I.C Head

Reputation: 2
  • View blog
  • Posts: 193
  • Joined: 03-December 08

Re: keyup function targeting too many classes

Posted 03 November 2011 - 10:55 AM

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!
Was This Post Helpful? 0
  • +
  • -

#4 Jstall  Icon User is offline

  • Lurker
  • member icon

Reputation: 434
  • View blog
  • Posts: 1,042
  • Joined: 08-March 09

Re: keyup function targeting too many classes

Posted 03 November 2011 - 11:05 AM

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 :)
Was This Post Helpful? 0
  • +
  • -

#5 midasxl  Icon User is offline

  • D.I.C Head

Reputation: 2
  • View blog
  • Posts: 193
  • Joined: 03-December 08

Re: keyup function targeting too many classes

Posted 21 November 2011 - 08:56 AM

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!
Was This Post Helpful? 0
  • +
  • -

Page 1 of 1