[RESOLVED] Form fields hidden until radio button click

hhartman1027

Hi!
I've been fighting with this for a few days now and it just doesn't seem to want to work! I've made a JSFiddle here... I thought it might be easier. If not, let me know.
Basically, we want to have the last section of questions (inside the DIV "ConsQ") hidden until the user clicks "Consumer". They're hidden fine with CSS, but when I want them to show up, they stay hidden. I've tried probably 8 or 9 different varieties of the JavaScript and nothing seems to work. I'm completely baffled at this point (on the verge of pulling my hair out!). Any suggestions on what's going on and what I'm doing wrong? I'm sure it's something that I'm missing, because I've been able to see working examples of other people using the same code. AHH! I really, REALLY, appreciate any help!

bradgrafelman

Your JSFiddle doesn't include the jQuery framework... that's why you're getting this error:

Uncaught ReferenceError: $ is not defined fiddle.jshell.net/s6zz9/1/show/:22

Once I added the jQuery framework, the JSFiddle worked as expected.

hhartman1027

bradgrafelman, you are my hero! 😃
I have both jquery-1.3.2.min.js and jquery-1.6.4.min.js included on the actual file. 1.3.2 was already included in the file, and I added 1.6.4 after seeing one of the codes using it. Which one worked for you? I'm assuming I have the wrong one.

Edit: I just tested 1.6.4 in the JSFiddle and it worked!! So clearly there's something screwy going on with the library that I downloaded or how I have it connected.
THANK YOU SO MUCH!

Weedpacket

hhartman1027 wrote:
I have both jquery-1.3.2.min.js and jquery-1.6.4.min.js included on the actual file.

I suspect that this could in itself cause a problem (or, as the jQuery documentation puts it, it's "not recommended"). Certainly if you don't use jQuery's noConflict() method to avoid having them trample each other.

hhartman1027

I am definitely having issues! It works with JSFiddle, but not when it's implemented on the actual page. I removed the include for 1.3.2 yesterday and it still doesn't work. I know the contact.js file is working because if I remove the include for it, the validation (which is included in that file) stops working for the other form fields. I also know it's connecting to the JQuery library for the same reason, if I remove it, certain things stop working. I don't understand what the issue is! AGH! http://jsfiddle.net/s6zz9/5/ has everything within the body tag and everything in the separate .js file - it all works fine.
Everything before the <body>:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en">
<head>
<title>Have Questions?</title>
<link rel="shortcut icon" href="/template_imgs/favicon.ico" />
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<meta name="DESCRIPTION" content="Have Questions?" />
<link href="../css/coastal-styles.css" rel="stylesheet" type="text/css" media="all" />
<link href="../css/contact.css" rel="stylesheet" type="text/css" media="all" />
<script src="../includes/jquery-1.6.4.min.js" type="text/javascript" charset="utf-8"></script>
<script src="../includes/jquery.validate.js" type="text/javascript" charset="utf-8"></script>
<script src="../includes/jquery.form.js" type="text/javascript" charset="utf-8"></script>
<script src="../includes/jquery.metadata.js" type="text/javascript" charset="utf-8"></script>
<script src="../includes/contact.js" type="text/javascript" charset="utf-8"></script>
</head>

Sorry I couldn't put it all together to read here, character limits prevent me from doing so.
Please assist! 🙂

Bonesnap

Try putting the...

$(".ConsQ").hide();
$("#cCustomerType-Consumer").click(function () {
    $(".ConsQ").show();
});

...code inside the $(document).ready() function. I'm not sure it will make a difference, as it's working in the fiddle, but you want the event to be added at document ready, so really it should be there. And I would recommend hiding the <div> with CSS instead of telling jQuery to hide it.

hhartman1027

Bonesnap;11040473 wrote:
Try putting the...
$(".ConsQ").hide();
$("#cCustomerType-Consumer").click(function () {
    $(".ConsQ").show();
});
...code inside the $(document).ready() function. I'm not sure it will make a difference, as it's working in the fiddle, but you want the event to be added at document ready, so really it should be there. And I would recommend hiding the <div> with CSS instead of telling jQuery to hide it.

AAHHHHHH!! You are the best! That fixed it!! It works! 😃 😃 😃 THANK YOU SO MUCH!!

Bonesnap

You are welcome! 🙂