[Webinar] Learn how to a build a cloud-first strategyRegister Now

x
  • Status: Solved
  • Priority: Medium
  • Security: Public
  • Views: 225
  • Last Modified:

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.
0
rgranlund
Asked:
rgranlund
  • 5
  • 4
  • 3
  • +1
1 Solution
 
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
VIDEO: THE CONCERTO CLOUD FOR HEALTHCARE

Modern healthcare requires a modern cloud. View this brief video to understand how the Concerto Cloud for Healthcare can help your organization.

 
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
 
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

Featured Post

Hire Technology Freelancers with Gigs

Work with freelancers specializing in everything from database administration to programming, who have proven themselves as experts in their field. Hire the best, collaborate easily, pay securely, and get projects done right.

  • 5
  • 4
  • 3
  • +1
Tackle projects and never again get stuck behind a technical roadblock.
Join Now