hhartman1027 Posted April 24, 2014 Share Posted April 24, 2014 Hi! I've been fighting with this for a few days now and I'm really getting tired of it. If I copy and paste everything within the body tag, as well as everything in the contact.js file into JSFiddle, everything works great. When I click on "Consumer" an additional DIV of questions appears. Fantastic! However, when I take everything that's in the functioning (on JSFiddle) body tag and put it with the rest of the file, it doesn't work. I thought it wasn't connecting to the JQuery library, but when I remove that line of code, the validation (that worked before) stops working, so I don't think that's it. I'm sure it's something stupidly simple, but I'm out of ideas. Any help would be AWESOME!The contents of the contact.js file (the radio button part is at the bottom) can be seen on the JSFiddle. <!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" /> <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> <html> <body> <div id="container"> <?php include($_SERVER[ 'DOCUMENT_ROOT']. '/includes/header.php'); ?> <div class="page-heading clear" style="background-image: none; height: 20px;"> <div class="breadcrumbs"><a href="../index.php">Home</a> > <a href="index.php">Contact Us</a> </div> </div> <div class="content"> <h1>Contact Us</h1> <p>Have questions? For your convenience our Customer Service Representives are available from 8:30 AM - 5:00 PM (Eastern Standard Time) Monday through Friday.</p> <p>All fields marked with <span class="required">*</span> are required.</p> <br /> <div id="contact-form" class="floatLeft rounded-corners"> <form method="post" action="contact_form_process.php" id="cform" onsubmit="return validateForm()"> <p> <label for="cname" class="main-label"><span class="required"> * </span>Your Name</label> <input id="cname" name="name" class="required" /> </p> <p> <label for="ccompany" class="main-label">Company</label> <input id="ccompany" name="company" /> </p> <p> <label for="caddress" class="main-label"><span class="required"> * </span>Address</label> <input id="caddress" name="address" class="required" /> </p> <p> <label for="ccity" class="main-label"><span class="required"> * </span>City</label> <input id="ccity" name="city" class="required" /> </p> <p> <label for="cstate" class="main-label"><span class="required"> * </span>State</label> <input id="cstate" name="state" class="required" /> </p> <p> <label for="czipcode" class="main-label"><span class="required"> * </span>Zip</label> <input id="czipcode" name="zipcode" class="required" /> </p> <p> <label for="ccountry" class="main-label"><span class="required"> * </span>Country</label> <input id="ccountry" name="country" class="required" /> </p> <p> <label for="cphone" class="main-label"><span class="required"> * </span>Phone</label> <input id="cphone" name="phone" class="required" /> </p> <p> <label for="cfax" class="main-label">Fax</label> <input id="cfax" name="fax" /> </p> <p> <label for="cwebsite" class="main-label">Website</label> <input id="cwebsite" name="website" /> </p> <p> <label for="ccontact"><span class="required"> * </span>E-Mail</label> <input id="ccontact" name="contact" class="required email" /> </p> <p> <label for="ccomments" id="ccomments-label" class="main-label"><span class="required"> * </span>Comments</label> <textarea id="ccomments" name="comments" class="required" rows="6" cols="6"></textarea> </p> <p>If you are contacting us about a product, please include as much information as possible (e.g. date of purchase, description of the item and nature of problem).</p> <p class="radio-questions"> <b>How did you hear about our website?</b> <br /> <span class="radio-wrapper"> <label class="referred-label" for="cReferred-Search"> <input type="radio" id="cReferred-Search" name="referred" value="Search_Engine" /> Search engine </label> <label class="referred-label" for="cReferred-Friend"> <input type="radio" id="cReferred-Friend" name="referred" value="Friend" /> Friend </label> <label class="referred-label" for="cReferred-Ad"> <input type="radio" id="cReferred-Ad" name="referred" value="Magazine_Ad" /> Magazine Ad </label> <label class="referred-label" for="cReferred-Packaging"> <input type="radio" id="cReferred-Packaging" name="referred" value="Product_Packaging" /> Product Packaging </label> <label class="referred-label" for="cReferred-Other"> <input type="radio" id="cReferred-Other" name="referred" value="Other" /> Other </label> </span> </p> <p> <label class="radioerror error" for="referred">This field is required.</label> </p> <div class="clear"></div> <div class="CustType" <p class="radio-questions"> <b>Check appropriate box.</b> <br /> <span class="radio-wrapper"> <label class="CustomerType-label" for="cCustomerType-Consumer"> <input type="radio" id="cCustomerType-Consumer" name="CustomerType" value="Consumer" /> Consumer </label> <label class="CustomerType-label" for="cCustomerType-Wholesale"> <input type="radio" id="cCustomerType-Wholesale" name="CustomerType" value="Wholesale" /> Wholesale Distributor </label> <label class="CustomerType-label" for="cCustomerType-Retail_Store"> <input type="radio" id="cCustomerType-Retail_Store" name="CustomerType" value="Retail_Store" /> Retail Store </label> <label class="CustomerType-label" for="cCustomerType-Mailorder"> <input type="radio" id="cCustomerType-Mailorder" name="CustomerType" value="Mailorder" /> Mail Order Catalog </label> <label class="CustomerType-label" for="cCustomerType-Other"> <input type="radio" id="cCustomerType-Other" name="CustomerType" value="Other" /> Other </label> </span> </p> </div> <p> <label class="radioerror error" for="CustomerType">This field is required.</label> </p> <div class="ConsQ"> <p class="radio-questions"> <b>What can we help you with?</b> <br /> <span class="radio-wrapper"> <label class="ConsumerHelp-label" for="cConsumerHelp-Use"> <input type="radio" id="cConsumerHelp-Use" name="ConsumerHelp" value="Use" /> Proper Use of a Product </label> <label class="ConsumerHelp-label" for="cConsumerHelp-Sizing"> <input type="radio" id="cConsumerHelp-Sizing" name="ConsumerHelp" value="Sizing" /> Sizing Information </label> <label class="ConsumerHelp-label" for="cConsumerHelp-Performance"> <input type="radio" id="cConsumerHelp-Performance" name="ConsumerHelp" value="Performance" /> Product Didn't Perform as Expected </label> <label class="ConsumerHelp-label" for="cConsumerHelp-Locate"> <input type="radio" id="cConsumerHelp-Locate" name="ConsumerHelp" value="Locate" /> Finding Product at a Retail Location </label> <label class="ConsumerHelp-label" for="cConsumerHelp-Other"> <input type="radio" id="cConsumerHelp-Other" name="ConsumerHelp" value="Other" /> Other </label> </span> </p> <p> <label for="cUPC" class="main-label">Please provide the UPC or Item # of the product you are referencing.</label> <input id="cUPC" name="UPC" /> </p> </br> </br> <p> <label for="cDescribe" id="cDescribe-label" class="main-label"><span class="required"> * </span>Please describe what you are looking for.</label> <textarea id="cDescribe" name="Describe" class="required" rows="6" cols="6"></textarea> </p> </div> <br clear="all"></br> <p>Please help us fight spam.</p> <p> <label for="cbot" class="main-label"><span class="required"> * </span>Please enter a number lower than 5.</label> <input id="txt_qty" name="qty" class="required" /> </p> <div class="special"> <input id="realemail" name="email" type="text" /> </div> <p class="formbuttons"> <input name="submit" type="submit" value="Submit" /> </p> </form> </div> </div> </body> <?php include( '../includes/footer.php'); ?> </html> Quote Link to comment Share on other sites More sharing options...
bsmither Posted April 24, 2014 Share Posted April 24, 2014 Can we try this with these edits? Was: <script src="../includes/contact.js" type="text/javascript" charset="utf-8"></script> <html> <body> Now: <script src="../includes/contact.js" type="text/javascript" charset="utf-8"></script> </head> <body> Was: </body> <?php include( '../includes/footer.php'); ?> </html> Now: <?php include( '../includes/footer.php'); ?> </body> </html> Not making any promises. Quote Link to comment Share on other sites More sharing options...
hhartman1027 Posted April 25, 2014 Author Share Posted April 25, 2014 Thanks for the response, bsmither!I caught the first part (the <html> instead of </head>) this morning and fixed that right away. I switched the location of the include, as you suggested. It still doesn't work. Any other thoughts? Quote Link to comment Share on other sites More sharing options...
hhartman1027 Posted April 25, 2014 Author Share Posted April 25, 2014 Okay, so I found out what the problem is and fixed it! The JavaScript lines below had to be moved up to be included in the $(document).ready() function. I also had to hide the DIV with CSS rather than in the JS. Woohoo! $("#cCustomerType-Consumer").click(function () { $(".ConsQ").show(); }); Quote Link to comment Share on other sites More sharing options...
Recommended Posts
Join the conversation
You can post now and register later. If you have an account, sign in now to post with your account.