fadeIn message when input is clicked

Hi,

I'm trying to fade in a message when an input is clicked.

I have several form inputs on my page. each one has a span id="message" inside my p tag


I want to fade in each message when the input is clicked individually, obviously not all at the same time.

I have this but it only fades in the first input area, and none of the rest of the messages. Please note all of the messages have the same id

$('input').click(function(){
            $(this).next();
            $('#message').fadeIn(800);
});
 
 
 
<p>
          <label for="title"> <span id="message">This field is required</span>First name:</label>
             <input name="firstname" class="input_width" type="text" id="firstname" />
          </p>
           
          <p><label for="lastname"><span id="message">This field is required</span>Last name:</label>
                 <input name="lastname" class="input_width" type="text" id="lastname" />
          </p>

Open in new window

LVL 2
spikeyman00Asked:
Who is Participating?
I wear a lot of hats...

"The solutions and answers provided on Experts Exchange have been extremely helpful to me over the last few years. I wear a lot of hats - Developer, Database Administrator, Help Desk, etc., so I know a lot of things but not a lot about one thing. Experts Exchange gives me answers from people who do know a lot about one thing, in a easy to use platform." -Todd S.

husker475Commented:
You can't have the same id for multiple elements. Use class instead.
0
spikeyman00Author Commented:
Yeah I'll change that to class, does'nt really answer my question though. But thanks.
0
husker475Commented:
Isn't it possible to get the id for the element that is calling the function?
Something like:

var id = $(this).id();

Then you could maybe do something like:

$( Select the span that is child to the <label> that has the attribute "for" that equals to the id. ).fadeIn(800);
0
spikeyman00Author Commented:
sounds good but what is the code for that. I'm a bit stuck on how to write the code
0
husker475Commented:
Here you go:
//JS:
$(document).ready(
	function(){
	$('input').click(function(){
		var input = this.id;
		$('label[for="'+input+'"] > span').fadeIn(800);
	});
});
 
//HTML - Had to change the "for"-attribute on the first <label>-tag 
//from title to firstname, but I guess that's what you really meant:
<p>
	<label for="firstname"> <span class="message">This field is required</span>First name:</label>
	<input name="firstname" class="input_width" type="text" id="firstname" />
</p>
<p>
	<label for="lastname"><span class="message">This field is required</span>Last name:</label>
	<input name="lastname" class="input_width" type="text" id="lastname" />
</p>

Open in new window

0

Experts Exchange Solution brought to you by

Your issues matter to us.

Facing a tech roadblock? Get the help and guidance you need from experienced professionals who care. Ask your question anytime, anywhere, with no hassle.

Start your 7-day free trial
It's more than this solution.Get answers and train to solve all your tech problems - anytime, anywhere.Try it for free Edge Out The Competitionfor your dream job with proven skills and certifications.Get started today Stand Outas the employee with proven skills.Start learning today for free Move Your Career Forwardwith certification training in the latest technologies.Start your trial today
jQuery

From novice to tech pro — start learning today.

Question has a verified solution.

Are you are experiencing a similar issue? Get a personalized answer when you ask a related question.

Have a better answer? Share it in a comment.