Want to protect your cyber security and still get fast solutions? Ask a secure question today.Go Premium

x
?
Solved

fadeIn message when input is clicked

Posted on 2008-11-14
5
Medium Priority
?
274 Views
Last Modified: 2012-08-13
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

0
Comment
Question by:spikeyman00
  • 3
  • 2
5 Comments
 
LVL 4

Expert Comment

by:husker475
ID: 22959442
You can't have the same id for multiple elements. Use class instead.
0
 
LVL 2

Author Comment

by:spikeyman00
ID: 22959581
Yeah I'll change that to class, does'nt really answer my question though. But thanks.
0
 
LVL 4

Expert Comment

by:husker475
ID: 22964804
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
 
LVL 2

Author Comment

by:spikeyman00
ID: 22965410
sounds good but what is the code for that. I'm a bit stuck on how to write the code
0
 
LVL 4

Accepted Solution

by:
husker475 earned 500 total points
ID: 22966720
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

Featured Post

Free Tool: Subnet Calculator

The subnet calculator helps you design networks by taking an IP address and network mask and returning information such as network, broadcast address, and host range.

One of a set of tools we're offering as a way of saying thank you for being a part of the community.

Question has a verified solution.

If you are experiencing a similar issue, please ask a related question

Introduction Chart.js, used properly, can visually add a difference to your charting applications. It engages your visitors and allows them to interact with data they otherwise wouldn't be able to without expensive and complicated systems. For this…
In this article you'll learn how to use Ajax calls within your CodeIgniter application. To explain this, I'll illustrate how to implement a simple contact form to allow visitors to send you an email through your web site.
The viewer will learn the basics of jQuery, including how to invoke it on a web page. Reference your jQuery libraries: (CODE) Include your new external js/jQuery file: (CODE) Write your first lines of code to setup your site for jQuery.: (CODE)
The viewer will learn the basics of jQuery including how to code hide show and toggles. Reference your jQuery libraries: (CODE) Include your new external js/jQuery file: (CODE) Write your first lines of code to setup your site for jQuery…
Suggested Courses
Course of the Month13 days, 5 hours left to enroll

580 members asked questions and received personalized solutions in the past 7 days.

Join the community of 500,000 technology professionals and ask your questions.

Join & Ask a Question