PDA

View Full Version : Resolved Form Dependency Manager - can't hide div holder



diedrichg
04-17-2010, 07:34 PM
Script Title: Form Dependency Manager

Script URL (on DD): Form Dependency Manager (http://www.dynamicdrive.com/dynamicindex16/formdependency.htm)

The problem: Can't completely hide <div> holder. The content is hidden but the <div> holder still take up real estate within the form.

I have a wedding r.s.v.p. form that has various what-if <option>. The form dependencies work exactly as they should but I am unable to hide the <div> holder. The actual content in the <div> is being correctly hidden but the <div> holder itself it taking up space on the page. How do I truly get the <div> to completely hide until it is told to display by the form <option> boxes?

CSS: is attached
JS: is attached

HTML:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<link href="css/flash.css" rel="stylesheet" type="text/css" />
<script src="js/FormManager.js">
/****************************************************
* Form Dependency Manager- By Twey- http://www.twey.co.uk
* Visit Dynamic Drive for this script and more: http://www.dynamicdrive.com
****************************************************/
</script>
<script type="text/javascript">
window.onload = function() {
setupDependencies('weboptions'); //name of form(s). Seperate each with a comma (ie: 'weboptions', 'myotherform' )
};
</script>
<!-- http://flowplayer.org/tools/demos/ -->
<script src="js/tools.tooltip-1.1.2.min.js"></script>
</head>
<body id="body">
<table width="580" border="0" align="center" cellpadding="0" cellspacing="0">
<tr>
<td height="20">&nbsp;</td>
</tr>
<tr>
<td align="center" valign="top" bgcolor="#FFFFFF">
<div class="guestlist">
<div class="tooltip"></div>
<form action="securemail.php" method="post" name="weboptions" id="weboptions">
<input type="hidden" name="subject" value="Wedding R.S.V.P." />
<input type="hidden" name="required" value="guest1-fn,guest1-ln,email" />
<input type="hidden" name="redirect" value="opt-in_thankyou.html" />
<div id="inputs">
<div class="header"><strong>Please fill in the form below:</strong></div>
<div class="guestsection">
<!-- Attendance -->
<select name="attendance" title="Select one of these options to begin your r.s.v.p." tabindex="1" >
<option value="" selected="selected">Please select your attendance - </option>
<option value="both">I/We will be attending both the wedding and the reception</option>
<option value="wedding">I/We will be attending the wedding only</option>
<option value="reception">I/We will be attending the reception only</option>
<option value="neither">Sorry, I/we will not be able to attend any of the events</option>
</select>
<br />
<!-- Number of Guests -->
<select name="numberguests" title="This will let us know who is attending. This information is very important to us." tabindex="2" class="CONFLICTS WITH attendance BEING neither AND DEPENDS ON attendance BEING both OR attendance BEING wedding OR attendance BEING reception">
<option value="" selected="selected">How many guests in your party will be attending?</option>
<option value="1">1</option>
<option value="2">2</option>
<option value="3">3</option>
</select>
<br />
</div>
<div class="guestsection" id="Guest1">
*For explanation only, this div container shouldn't be here! You can see how they are still displayed for guest 2 & 3 below if only 1 guest is selected*<br />
<!--GUEST 1-->
<label>Guest 1 First Name:
<input name="guest1-fn" title="Guest 1 First Name" type="text" size="20" maxlength="255" tabindex="3" class="DEPENDS ON numberguests BEING 1 OR numberguests BEING 2 OR numberguests BEING 3 OR numberguests BEING 4 OR numberguests BEING 5 OR numberguests BEING 6"/>
</label>
<br />
<label>Guest 1 Last Name:
<input name="guest1-ln" title="Guest 1 Last Name" type="text" size="20" maxlength="255" tabindex="4" class="DEPENDS ON numberguests BEING 1 OR numberguests BEING 2 OR numberguests BEING 3 OR numberguests BEING 4 OR numberguests BEING 5 OR numberguests BEING 6"/>
</label>
<br />
<label>Do you have any food allergies or dietary restrictions?
<input type="checkbox" name="guest1-diet" title="Check this box to list your food allergies or dietary restrictions." tabindex="7" class="CONFLICTS WITH attendance BEING wedding AND CONFLICTS WITH attendance BEING neither AND DEPENDS ON numberguests BEING 1 OR numberguests BEING 2 OR numberguests BEING 3 OR numberguests BEING 4 OR numberguests BEING 5 OR numberguests BEING 6"/>
</label>
<br />
<fieldset id="fieldset" class="DEPENDS ON guest1-diet">
<label>Please list your food allergies or dietary restrictions.
<input name="other-allergies2" type="text" title="You may list items such as nuts, gluten, shellfish, vegan, etc." tabindex="8" size="59" maxlength="255" />
</label>
</fieldset>
</div>
<div class="guestsection" id="Guest2">
<!--2 GUESTS -->
<label>Guest 2 First Name:
<input name="guest2-fn" title="Guest 2 First Name" type="text" size="20" maxlength="255" tabindex="9" class="DEPENDS ON numberguests BEING 2 OR numberguests BEING 3 OR numberguests BEING 4 OR numberguests BEING 5 OR numberguests BEING 6"/>
</label>
<br />
<label>Guest 2 Last Name:
<input name="guest2-ln" title="Guest 2 Last Name" type="text" size="20" maxlength="255" tabindex="10" class="DEPENDS ON numberguests BEING 2 OR numberguests BEING 3 OR numberguests BEING 4 OR numberguests BEING 5 OR numberguests BEING 6"/>
</label>
<br />
<label>Do you have any food allergies or dietary restrictions?
<input type="checkbox" name="guest2-diet" title="Check this box to list your food allergies or dietary restrictions." tabindex="13" class="CONFLICTS WITH attendance BEING wedding AND CONFLICTS WITH attendance BEING neither AND DEPENDS ON numberguests BEING 2 OR numberguests BEING 3 OR numberguests BEING 4 OR numberguests BEING 5 OR numberguests BEING 6"/>
</label>
<br />
<fieldset id="fieldset" class="DEPENDS ON guest2-diet">
<label>Please list your food allergies or dietary restrictions.
<input name="other-allergies" type="text" title="You may list items such as nuts, gluten, shellfish, vegan, etc." tabindex="14" size="59" maxlength="255" />
</label>
</fieldset>
</div>
<div class="guestsection" id="Guest3">
<!--3 GUESTS -->
<label>Guest 3 First Name:
<input name="guest3-fn" title="Guest 3 First Name" type="text" size="20" maxlength="255" tabindex="15" class="DEPENDS ON numberguests BEING 3 OR numberguests BEING 4 OR numberguests BEING 5 OR numberguests BEING 6"/>
</label>
<br />
<label>Guest 3 Last Name:
<input name="guest3-ln" title="Guest 3 Last Name" type="text" size="20" maxlength="255" tabindex="16" class="DEPENDS ON numberguests BEING 3 OR numberguests BEING 4 OR numberguests BEING 5 OR numberguests BEING 6"/>
</label>
<br />
<label>Do you have any food allergies or dietary restrictions?
<input type="checkbox" name="guest3-diet" title="Check this box to list your food allergies or dietary restrictions." tabindex="19" class="CONFLICTS WITH attendance BEING wedding AND CONFLICTS WITH attendance BEING neither AND DEPENDS ON numberguests BEING 3 OR numberguests BEING 4 OR numberguests BEING 5 OR numberguests BEING 6"/>
</label>
<br />
<fieldset id="fieldset" class="DEPENDS ON guest3-diet">
<label>Please list your food allergies or dietary restrictions.
<input name="other-allergies" title="You may list items such as nuts, gluten, shellfish, vegan, etc." tabindex="20" type="text" size="59" maxlength="255" />
</label>
</fieldset>
</div>

<div> <strong>Your email address:</strong> <br>
<input name="email" title="Please provide us with your email address in case we need more information regarding your r.s.v.p. or if any of the wedding or reception details change." tabindex="63" type="text" size="59" maxlength="255"/>
</div>
</div>
</div>

</form>
</div>
</td>
</tr>
</table>
</body>
</html>


Any help would be greatly appreciated in getting these <div> containers truly hidden and then shown when called upon.
Thank you.

diedrichg
04-19-2010, 12:43 AM
SOLVED! I was incorrectly using the code.

What I did was to take out the <div> containers since the original JS calls for anything with a form attribute (fieldset, input, select, etc..) to be hidden. I was trying to group form items with a <div> when I should have been using a <fieldset>.

Original:

<div class="guestsection" id="Guest1">
*For explanation only, this div container shouldn't be here! You can see how they are still displayed for guest 2 & 3 below if only 1 guest is selected*<br />
<!--GUEST 1-->
<label>Guest 1 First Name:
<input name="guest1-fn" title="Guest 1 First Name" type="text" size="20" maxlength="255" tabindex="3" class="DEPENDS ON numberguests BEING 1 OR numberguests BEING 2 OR numberguests BEING 3 OR numberguests BEING 4 OR numberguests BEING 5 OR numberguests BEING 6"/>
</label>
<br />
<label>Guest 1 Last Name:
<input name="guest1-ln" title="Guest 1 Last Name" type="text" size="20" maxlength="255" tabindex="4" class="DEPENDS ON numberguests BEING 1 OR numberguests BEING 2 OR numberguests BEING 3 OR numberguests BEING 4 OR numberguests BEING 5 OR numberguests BEING 6"/>
</label>
<br />
<label>Do you have any food allergies or dietary restrictions?
<input type="checkbox" name="guest1-diet" title="Check this box to list your food allergies or dietary restrictions." tabindex="7" class="CONFLICTS WITH attendance BEING wedding AND CONFLICTS WITH attendance BEING neither AND DEPENDS ON numberguests BEING 1 OR numberguests BEING 2 OR numberguests BEING 3 OR numberguests BEING 4 OR numberguests BEING 5 OR numberguests BEING 6"/>
</label>
<br />
<fieldset id="fieldset" class="DEPENDS ON guest1-diet">
<label>Please list your food allergies or dietary restrictions.
<input name="other-allergies2" type="text" title="You may list items such as nuts, gluten, shellfish, vegan, etc." tabindex="8" size="59" maxlength="255" />
</label>
</fieldset>
</div>


Went to:

<fieldset class="DEPENDS ON numberguests BEING 1 OR numberguests BEING 2 OR numberguests BEING 3 OR numberguests BEING 4 OR numberguests BEING 5 OR numberguests BEING 6 OR attendance BEING Neither"/>
<!--GUEST 1-->
<strong><font color="#FF0000">*</font></strong> Your First Name:
<input name="guest1-fn" title="Your First Name" type="text" size="20" maxlength="255" tabindex="3">

<br />
<strong><font color="#FF0000">*</font></strong> Your Last Name:
<input name="guest1-ln" title="Your Last Name" type="text" size="20" maxlength="255" tabindex="4">

<br />
Do you have any food allergies or dietary restrictions?
<input type="checkbox" name="guest1-diet" title="Check this box to list your food allergies or dietary restrictions." tabindex="7">

<br />
<fieldset id="fieldset" class="DEPENDS ON guest1-diet">
Please list your food allergies or dietary restrictions.
<input name="other_allergies1" type="text" title="You may list items such as nuts, gluten, shellfish, vegan, etc." tabindex="8" size="59" maxlength="255">
</fieldset>
</fieldset>