CSS Codes
CSS Layouts
Results 1 to 2 of 2

Thread: Form Dependency Manager - can't hide div holder

  1. 04-17-2010, 07:34 PM #1
    diedrichg
    diedrichg is offline New Comer (less than 5 posts)
    Join Date
    Apr 2010
    Posts
    4
    Thanks
    0
    Thanked 0 Times in 0 Posts

    Unhappy Form Dependency Manager - can't hide div holder

    Script Title: Form Dependency Manager

    Script URL (on DD): Form Dependency Manager

    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:
    Code:
    <!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.
    Last edited by diedrichg; 04-19-2010 at 04:40 AM. Reason: added source webpage
    Reply With Quote Reply With Quote
  2. 04-19-2010, 12:43 AM #2
    diedrichg
    diedrichg is offline New Comer (less than 5 posts)
    Join Date
    Apr 2010
    Posts
    4
    Thanks
    0
    Thanked 0 Times in 0 Posts

    Lightbulb Solved!

    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:
    Code:
    <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:
    Code:
    <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>
    Last edited by diedrichg; 04-19-2010 at 12:46 AM. Reason: added description of the changes I made
    Reply With Quote Reply With Quote
« Previous Thread | Next Thread »

Bookmarks

Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts
  •  

Forum Rules