JQuery To Show Div

How do I use JQuery to show a div if info is entered into a field?

<form>
<div class="firstName">
First Name: <input type="text" name="firstName">
</div>

<div class="lastName" style="display:none;" >
Last Name: <input type="text" name="lastName" required="">
</div>
</form>

Open in new window

So the div for Last Name is hidden.  If you put any info into "First Name" it shows the Last Name div.
LVL 7
rgranlundAsked:
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.

GaryCommented:
$(".firstName").keyup(function(){
     $(".lastName").show()
})

Open in new window

0
Ray PaseurCommented:
in Gary's example, .keyup() is called an "event."  This page describes events:
http://api.jquery.com/category/events/
0
rgranlundAuthor Commented:
I used the following:
<script type="text/javascript">
jQuery(document).ready(function($) {  

    $(".firstName").keyup(function(){
     $(".lastName").show();
	});
});

</script>	

Open in new window


I placed the display:none; in the css class.  It hides the div for lastName but when I enter anything into firstName, nothing happens.
0
Ultimate Tool Kit for Technology Solution Provider

Broken down into practical pointers and step-by-step instructions, the IT Service Excellence Tool Kit delivers expert advice for technology solution providers. Get your free copy now.

GaryCommented:
Are you including the jQuery library?
Post the rendered HTML of the page
0
rgranlundAuthor Commented:
Yes, the JQuery Library is included.
0
GaryCommented:
Post the HTML from the page.
0
Ray PaseurCommented:
This worked for me.  Only tested in Chrome.

<!DOCTYPE html>
<html dir="ltr" lang="en-US">
<head>
<meta charset="utf-8" />
<meta name="robots" content="noindex, nofollow" />
<meta name="viewport" content="width=device-width, initial-scale=1.0">

<script type="text/javascript" src="http://code.jquery.com/jquery-latest.min.js"></script>
<script>
$(document).ready(function(){
    $(".lastName").hide();
    $(".signal").keyup(function(){
        $(".lastName").show('slow');
    });
});
</script>

<title>HTML5 Page with jQuery hide() and show()</title>
</head>
<body>

<form>

<div class="firstName">
First Name: <input class="signal" type="text" name="firstName">
</div>

<div class="lastName">
Last Name: <input type="text" name="lastName" required="">
</div>

<input type="submit" />
</form>

</body>
</html>

Open in new window

0
GaryCommented:
I was targetting the DIV and not the INPUT

$("[name=firstName]").keyup(function(){
     $(".lastName").show()
})

Open in new window

Edit
Actually my first code should work
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
Ray PaseurCommented:
Did you accidentally overlook the answer here?
http://www.experts-exchange.com/Programming/Languages/Scripting/JavaScript/Jquery/Q_28494252.html#a40251217

Typically, the first tested and working code sample might be expected to receive at least some of the award points, right?  Please explain why you didn't give any points at all for that answer, thanks.
0
GaryCommented:
Which would be the very first comment from me so move along now
0
RobOwner (Aidellio)Commented:
Ray/Gary

If I'd seen this question earlier I would've jumped in with something similar to what Gary posted in http:#a40251226. This is definitely the answer and the most correct.  it targets the input element that forms the logic you are trying to capture. What would happen if there was other input elements in the "firstname" div? Entering text in either would trigger the lastname to show.
0
Ray PaseurCommented:
What would happen if there was other input elements in the "firstname" div?
Rob, really?  What would happen if the gas tank explodes?  What if the big lizards come?  All I can do is offer working examples -- I can't account for all possible contingencies or for information that is not in evidence, and neither can anyone else.  The example I posted was complete, tested and correct.  I do not post untested or incomplete code without a warning to that effect.  It was the only code snippet among the responses that could be copied and installed and run with success.
0
RobOwner (Aidellio)Commented:
Ray,  It's a working example, it's just not 100% correct.  
I would never code this logic like this because it's not targeting the right element.  it just appears to work.  You could've done the same with the <body> element at the lastname div would show but later on will give unexpected results.  

Gary's answer will ALWAYS work.
0
rgranlundAuthor Commented:
@ All.  Thank you for your colorful comments.  The reason I accepted the answer that I did was it is what led me to understanding how to fix my specific issue.  I extremely appreciate all of the effort that the experts offer and continually supply and am grateful for all of the help.  Sometimes my questions are based on wanting to understand and when I read an answer that puts me on the right track, that is answer I choose.  As for the Lizards, I'll leave them up to y'all!
0
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.