Jump to content

Show hidden DIV on radio button click

hhartman1027

By hhartman1027
in PHP Coding Help

 Share

Recommended Posts

hhartman1027 Newbie

hhartman1027

Posted
Posted

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>
Link to comment
https://forums.phpfreaks.com/topic/287998-show-hidden-div-on-radio-button-click/
Share on other sites
bsmither Member

bsmither

Posted
Posted

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.

hhartman1027 Newbie

hhartman1027

Posted
  • Author
Posted

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();
});
This thread is more than a year old. Please don't revive it unless you have something important to add.

Join the conversation

You can post now and register later. If you have an account, sign in now to post with your account.

Guest
Reply to this topic...

×   Pasted as rich text.   Restore formatting

  Only 75 emoji are allowed.

×   Your link has been automatically embedded.   Display as a link instead

×   Your previous content has been restored.   Clear editor

×   You cannot paste images directly. Upload or insert images from URL.

×
 Share
Go to topic listing
×
×
  • Create New...

Important Information

We have placed cookies on your device to help make this website better. You can adjust your cookie settings, otherwise we'll assume you're okay to continue.