Help with CSS display:none

**fcarpio** · May 26, 2011 11:57

Hello all,
What I am trying to achieve is to have a drop down menu that displays other fields based on what is selected. In this example I want to ask the end user to select a carrier (FedEx, UPS, etc), but there is an "other" option for freight carriers. If they select "other" I want to show another text field where I would collect the freight carrier's name. The field starts as invisible using the CSS display set to none property. The problem I am having is that it does not start hidden and I cannot get it to go away so I can display it when needed. Any other ideas on how to achieve this are greatly appreciated.

Thanks in advance for the help.

This is my code:

HTML Code:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">

<html xmlns="http://www.w3.org/1999/xhtml">

<head>

<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />

<title>TSRI's Ready To Ship</title>

<link href="css/thrColFixHdr.css" rel="stylesheet" type="text/css" />

<!--[if IE 5]>

<style type="text/css"> 

/* place css box model fixes for IE 5* in this conditional comment */

.thrColFixHdr #sidebar1 { width: 180px; }

.thrColFixHdr #sidebar2 { width: 190px; }

</style>

<![endif]--><!--[if IE]>

<style type="text/css"> 

/* place css fixes for all versions of IE in this conditional comment */

.thrColFixHdr #sidebar2, .thrColFixHdr #sidebar1 { padding-top: 30px; }

.thrColFixHdr #mainContent { zoom: 1; }

/* the above proprietary zoom property gives IE the hasLayout it needs to avoid several bugs */

</style>

<![endif]-->



<SCRIPT LANGUAGE="JavaScript">



function validate() 

{

	var billing			=	document.getElementById('billing');

	var carrier			=	document.getElementById('carrier');

	var deliveryType	=	document.getElementById('deliveryType');

	

	if(madeSelection(billing, 		"Please select billing type")){

	if(madeSelection(carrier, 		"Please select a carrier")){

	if(madeSelection(deliveryType, 	"Please select the delivery type")){



	return true;



	}}}



	return false;

	

	function madeSelection(elem, helperMsg)

	{

		if(elem.value == "select")

		{

			alert(helperMsg);

			elem.focus();

			return false;

		}

		else

		{

			return true;

		}

	}

}



function unhide(divID) 

{

 	var item = document.getElementById(divID);

 	

	if(item) 

	{

 		item.className=(item.className=='hidden')?'unhidden':'hidden';

 	}

}



</SCRIPT>



</head>



<body class="thrColFixHdr">



<div id="container">

<div id="header">

<img src="images/banner3.png" width="1000" height="150" alt="Ready To Ship!" />	

</div>

<!-- end #header -->

<div id="sidebar1">

<p><strong>You are logged on as Francisco Carpio</strong></p>    <p><a href="Step1_shipmentType.php">Generate Shipment</a></p>

    <p><a href="reports.php">My Transactions</a></p>

<p><a href="retrievepwd.php">Reset Password</a></p>



    <p><strong>My Address Book</strong></p>

    <p>&nbsp;&nbsp&nbsp;&nbsp;&nbsp;<a href="addressBook.php">Select</a></p>

    <p>&nbsp;&nbsp&nbsp;&nbsp;&nbsp;<a href="addrNew.php">Add New</a></p>

    <p>&nbsp;&nbsp&nbsp;&nbsp;&nbsp;<a href="addrEdit.php">Edit</a></p>

    <p>&nbsp;&nbsp&nbsp;&nbsp;&nbsp;<a href="addrRemove.php">Remove</a></p>

        <p><strong>EH&amp;S Approvals</strong>&nbsp;(0)</p>

	<p>&nbsp;&nbsp&nbsp;&nbsp;&nbsp;<a href="ehsApprovals.php?transType=BIO">Biological</a></p>

        <p>&nbsp;&nbsp&nbsp;&nbsp;&nbsp;<a href="ehsApprovals.php?transType=CHEM">Chemical</a></p>

	<p>&nbsp;&nbsp&nbsp;&nbsp;&nbsp;<a href="ehsApprovals.php?transType=RAD">Radiological</a></p>



     	<p><strong>S&amp;R Main</strong>&nbsp;(0)</p>

		<p>&nbsp;&nbsp&nbsp;&nbsp;&nbsp;<a href="snrGetTrack.php">Enter Tracking #'s</a></p>

		<p>&nbsp;&nbsp&nbsp;&nbsp;&nbsp;<a href="snrSearch.php">Search</a></p>

     	<p><strong>Admin</strong></p>

		<p>&nbsp;&nbsp&nbsp;&nbsp;&nbsp;<a href="stats.php">Stats</a></p>

        <p><strong>Logoff</strong></p>

        <p>&nbsp;&nbsp&nbsp;&nbsp;&nbsp;<a href="logoff.php">Logoff</a></p>

<!-- end #sidebar1 -->

</div>

<div id="sidebar2">

<h2>some output goes here</h2>  <!-- end #sidebar2 --></div>

  <div id="mainContent">

    <h1>Shipping Options</h1>

    <form id="form1" name="form1" method="post" action="Step6_itemsShipped.php" onSubmit="return validate()">

    <table width="575" border="0" cellspacing="1" cellpadding="1">

    <tr>

    <th colspan="2"><p>Enter Shipping Options</p></th>

    </tr>

      <tr>

        <td width="30%"><p>Billing:</p></td>

        <td width="70%">

          <p>

            <label for="billing"></label>

            <select name="billing" id="billing" tabindex="1">

            <option value="select" selected>Select</option>

            <option value="Sender">Bill Sender</option>

            <option value="Recipient">Bill Recipient</option>

            <option value="3rd Party">Bill Third Party</option>

            </select>

          </p></td>

      </tr>

      <tr>

        <td><p>Carrier:</p></td>

        <td><p>

          <label for="carrier"></label>

          <select onchange="unhide(this);" name="carrier" id="carrier" tabindex="2" >

          	<option value="select" selected>Select</option>

          	<option value="FedEx">FedEx</option>

          	<option value="UPS">UPS</option>

          	<option value="DHL">DHL</option>

          	<option value="USPS">USPS</option>

          	<option value="other">Other</option>

          </select>

        </p></td>

      </tr>

      <div id="other" class="hidden">

      <tr>

        <td><p>Carrier Name:</p></td>

        <td><input type="text" name="carrierName" id="carrierName" tabindex="3" /></td>

      </tr>

	  </div>	

      <tr>

        <td><p>Carrier Account No.:</p></td>

        <td><p>

          <label for="carrierAcc"></label>

          <input type="text" name="carrierAcc" id="carrierAcc" tabindex="4" />

        </p></td>

      </tr>

      <tr>

        <td><p>Delivery Type:</p></td>

        <td><p>

          <label for="deliveryType"></label>

          <select name="deliveryType" id="deliveryType" tabindex="5">

          <option value="select" selected>Select</option>

          <option value="Overnight">Overnight</option>

          <option value="2-Day">2 Day</option>

          <option value="3-Day">3 Day</option>

          <option value="Ground">Ground</option>

          </select>

        </p></td>

      </tr>

      <tr>

        <td><p>Notes:</p></td>

        <td><p>

          <label for="notes"></label>

          <textarea name="notes" id="notes" cols="45" rows="5" tabindex="6"></textarea>

        </p></td>

      </tr>

    </table>



    <p><input type="submit" name="next" id="next" value="Next" tabindex="6" />

    </p>

    </form>

	<!-- end #mainContent --></div>

	<!-- This clearing element should immediately follow the #mainContent div in order to force the #container div to contain all child floats --><br class="clearfloat" />

<div id="footer">

  <p>Footer message goes here</p>

<!-- end #footer --></div>

<!-- end #container --></div>

</body>

</html>

Sorry for the extra lines in the code, I don't know how they got there.

**fcarpio** · May 26, 2011 12:09

Just as an FYI, there is something in my code that is messing up the hidden property. When I isolate the code it works well. I have tried to remove parts of the code to try to determine what is messing things up with no success.

**Paul O'B** · May 26, 2011 12:20

Hi,

This is really a javascript question (especially as you didn't show any css anwyay

).

You can't however wrap a div around a table-row as that is invalid and won't work. You need to hide and show the table row instead (although forms aren't really tabular data and table-free would have been easier.)

Apply the class to the table-row instead of a div as follows.

Code:

<tr>
                    <td><p>Carrier:</p></td>
                    <td><p>
                            <label for="carrier"></label>
                            <select onChange="unhide(this);" name="carrier" id="carrier" tabindex="2" >
                                <option value="select" selected>Select</option>
                                <option value="FedEx">FedEx</option>
                                <option value="UPS">UPS</option>
                                <option value="DHL">DHL</option>
                                <option value="USPS">USPS</option>
                                <option onclick="unhide('other')" value="other">Other</option>
                            </select>
                        </p></td>
                </tr>
                    <tr id="other" class="hidden">
                        <td><p>Carrier Name:</p></td>
                        <td><input type="text" name="carrierName" id="carrierName" tabindex="3" /></td>
                    </tr>
                <tr>
                    <td><p>Carrier Account No.:</p></td>
                    <td><p>
                            <label for="carrierAcc"></label>
                            <input type="text" name="carrierAcc" id="carrierAcc" tabindex="4" />
                        </p></td>
                </tr>

Then I assume you will have some css like this (or you should have some css like this).

Code:

.hidden{display:none}
.unhidden{display:block}/*ie6/7*/
.unhidden{display:table-row}

Then you could hide the row when the option is clicked.

Code:

<td><p>
                            <label for="carrier"></label>
                            <select onChange="unhide(this);" name="carrier" id="carrier" tabindex="2" >
                                <option value="select" selected>Select</option>
                                <option value="FedEx">FedEx</option>
                                <option value="UPS">UPS</option>
                                <option value="DHL">DHL</option>
                                <option value="USPS">USPS</option>
                                <option onclick="unhide('other')" value="other">Other</option>
                            </select>
                        </p></td>

However, I guess you have some sort of validation script to catch when the select is clicked anyway and then use its value to check whether to open the table-row up.

You need to be careful changing the class on an element without checking whether the element has multiple classes or not as you could inadvertently delete a class that was needed.

If you need further help I'll move this to the JS forum for better advice.

**Paul O'B** · May 26, 2011 12:25

Also the doctype you are using will make IE go into quirks mode and use the broken box model among other things. Use a full valid doctype.

It seems you have a page that is xhtml transitional anyway but you are using an old htm4.01 doctype without uri.

The xhtml transitional doctype is this:

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" />
<title>Untitled Document</title>
</head>

<body>
</body>
</html>

Although these days you should really be using strict.

**fcarpio** · May 26, 2011 13:10

Thanks Paul. The <tr> is hidden now but the JavaScript is not triggering it to reappear when the "other" option is selected. I will appreciate it if you could move this post to the JS forum. Maybe they could help me with the JavaScript there.

Thanks again,

FC

**Paul O'B** · May 27, 2011 02:25

Did you include the JS you were using to trigger the showing of the extra content?

If you post the full script then I'll move this to the JS forum. (Using the temporary onclick method I showed above shows that it will work if implemented correctly).

**fcarpio** · May 27, 2011 05:14

Thank you, here is the full JS for this:

Code:

function unhide(divID) 
{
 	var item = document.getElementById(divID);
 	
	if(item) 
	{
 		item.className=(item.className=='hidden')?'unhidden':'hidden';
 	}
}

The rest of my JS is in my original post. I wanted to call this from the onchange on my drop down menu. As usual, I am open to new (better) ideas.

**Paul O'B** · May 27, 2011 06:15

Originally Posted by fcarpio

Thank you, here is the full JS for this:

Code:

function unhide(divID) 
{
     var item = document.getElementById(divID);
     
    if(item) 
    {
         item.className=(item.className=='hidden')?'unhidden':'hidden';
     }
}

The rest of my JS is in my original post. I wanted to call this from the onchange on my drop down menu. As usual, I am open to new (better) ideas.

I'll move it to the JS forum now as your onchange event is all wrong as you don't have an id to work with and you aren't detecting which option element was changed. If you add my onclick code to the option element you will see that it is working but obviously is not the best way to do this.

**fcarpio** · May 27, 2011 07:49

Thanks. I now have it sort of working but the browser is rendering the table in a funny way.

It should look like (I got this by removing the tbody tags so that may be the problem):

But it looks like (with the tbody tags):

This is the code:

Code:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>TSRI's Ready To Ship</title>
<link href="css/thrColFixHdr.css" rel="stylesheet" type="text/css" />
<!--[if IE 5]>
<style type="text/css"> 
/* place css box model fixes for IE 5* in this conditional comment */
.thrColFixHdr #sidebar1 { width: 180px; }
.thrColFixHdr #sidebar2 { width: 190px; }
</style>
<![endif]--><!--[if IE]>
<style type="text/css"> 
/* place css fixes for all versions of IE in this conditional comment */
.thrColFixHdr #sidebar2, .thrColFixHdr #sidebar1 { padding-top: 30px; }
.thrColFixHdr #mainContent { zoom: 1; }
/* the above proprietary zoom property gives IE the hasLayout it needs to avoid several bugs */
</style>
<![endif]-->

<SCRIPT LANGUAGE="JavaScript">

function validate() 
{
	var billing			=	document.getElementById('billing');
	var carrier			=	document.getElementById('carrier');
	var deliveryType	=	document.getElementById('deliveryType');
	
	if(madeSelection(billing, 		"Please select billing type")){
	if(madeSelection(carrier, 		"Please select a carrier")){
	if(madeSelection(deliveryType, 	"Please select the delivery type")){

	return true;

	}}}

	return false;
	
	function madeSelection(elem, helperMsg)
	{
		if(elem.value == "select")
		{
			alert(helperMsg);
			elem.focus();
			return false;
		}
		else
		{
			return true;
		}
	}
}

function display(obj,id1) 
{
	txt = obj.options[obj.selectedIndex].value;
	document.getElementById(id1).style.display = 'none';
	/*document.getElementById(id2).style.display = 'none';*/
	
	if(txt.match(id1)) 
	{
		document.getElementById(id1).style.display = 'block';
	}
	/*if(txt.match(id2)) 
	{
		document.getElementById(id2).style.display = 'block';
	}*/
}
</SCRIPT>

</head>
<body class="thrColFixHdr">
<div id="container">
<div id="header">
<img src="images/banner3.png" width="1000" height="150" alt="Ready To Ship!" />	
</div>
<!-- end #header -->
<div id="sidebar1">
<p><strong>You are logged on as Francisco Carpio</strong></p>    <p><a href="Step1_shipmentType.php">Generate Shipment</a></p>
    <p><a href="reports.php">My Transactions</a></p>
<p><a href="retrievepwd.php">Reset Password</a></p>
    <p><strong>My Address Book</strong></p>
    <p>&nbsp;&nbsp&nbsp;&nbsp;&nbsp;<a href="addressBook.php">Select</a></p>
    <p>&nbsp;&nbsp&nbsp;&nbsp;&nbsp;<a href="addrNew.php">Add New</a></p>
    <p>&nbsp;&nbsp&nbsp;&nbsp;&nbsp;<a href="addrEdit.php">Edit</a></p>
    <p>&nbsp;&nbsp&nbsp;&nbsp;&nbsp;<a href="addrRemove.php">Remove</a></p>
        <p><strong>EH&amp;S Approvals</strong>&nbsp;(0)</p>
	<p>&nbsp;&nbsp&nbsp;&nbsp;&nbsp;<a href="ehsApprovals.php?transType=BIO">Biological</a></p>
        <p>&nbsp;&nbsp&nbsp;&nbsp;&nbsp;<a href="ehsApprovals.php?transType=CHEM">Chemical</a></p>
	<p>&nbsp;&nbsp&nbsp;&nbsp;&nbsp;<a href="ehsApprovals.php?transType=RAD">Radiological</a></p>
     	<p><strong>S&amp;R Main</strong>&nbsp;(0)</p>
		<p>&nbsp;&nbsp&nbsp;&nbsp;&nbsp;<a href="snrGetTrack.php">Enter Tracking #'s</a></p>
		<p>&nbsp;&nbsp&nbsp;&nbsp;&nbsp;<a href="snrSearch.php">Search</a></p>
     	<p><strong>Admin</strong></p>
		<p>&nbsp;&nbsp&nbsp;&nbsp;&nbsp;<a href="stats.php">Stats</a></p>
        <p><strong>Logoff</strong></p>
        <p>&nbsp;&nbsp&nbsp;&nbsp;&nbsp;<a href="logoff.php">Logoff</a></p>
<!-- end #sidebar1 -->
</div>
<div id="sidebar2">
<h2>some output goes here</h2>  <!-- end #sidebar2 --></div>
  <div id="mainContent">
    <h1>Shipping Options</h1>
    <form id="form1" name="form1" method="post" action="Step6_itemsShipped.php" onSubmit="return validate()">
    <table width="575" border="0" cellspacing="1" cellpadding="1">
    <tr>
    <th colspan="2"><p>Enter Shipping Options</p></th>
    </tr>
      <tr>
        <td width="30%"><p>Billing:</p></td>
        <td width="70%">
          <p>
            <label for="billing"></label>
            <select name="billing" id="billing" tabindex="1">
            <option value="select" selected>Select</option>
            <option value="Sender">Bill Sender</option>
            <option value="Recipient">Bill Recipient</option>
            <option value="3rd Party">Bill Third Party</option>
            </select>
          </p>
          </td>
      </tr>
      <tr>
        <td><p>Carrier:</p></td>
        <td><p>
          <label for="carrier"></label>
          <select name="carrier" id="carrier" tabindex="2" onchange="display(this,'other');">
          	<option value="select" selected>Select</option>
          	<option value="FedEx">FedEx</option>
          	<option value="UPS">UPS</option>
          	<option value="DHL">DHL</option>
          	<option value="USPS">USPS</option>
          	<option value="other">Other</option>
          </select>
        </p>
        </td>
      </tr>
      
      <tbody id="other" style="display: none;">
      <tr>
        <td><p>Carrier Name:</p></td>
        <td><p><input type="text" name="carrierName" id="carrierName" tabindex="3" /></p></td>
      </tr>
      </tbody>
      
      <tr>
        <td><p>Carrier Account No.:</p></td>
        <td><p>
          <label for="carrierAcc"></label>
          <input type="text" name="carrierAcc" id="carrierAcc" tabindex="4" />
        </p></td>
      </tr>
      <tr>
        <td><p>Delivery Type:</p></td>
        <td><p>
          <label for="deliveryType"></label>
          <select name="deliveryType" id="deliveryType" tabindex="5">
          <option value="select" selected>Select</option>
          <option value="Overnight">Overnight</option>
          <option value="2-Day">2 Day</option>
          <option value="3-Day">3 Day</option>
          <option value="Ground">Ground</option>
          </select>
        </p></td>
      </tr>
      <tr>
        <td><p>Notes:</p></td>
        <td><p>
          <label for="notes"></label>
          <textarea name="notes" id="notes" cols="45" rows="5" tabindex="6"></textarea>
        </p></td>
      </tr>
    </table>

    <p><input type="submit" name="next" id="next" value="Next" tabindex="6" />
    </p>
    </form>
	<!-- end #mainContent --></div>
	<!-- This clearing element should immediately follow the #mainContent div in order to force the #container div to contain all child floats --><br class="clearfloat" />
<div id="footer">
  <p>Footer message goes here</p>
<!-- end #footer --></div>
<!-- end #container --></div>
</body>
</html>

**Paul O'B** · May 27, 2011 09:59

I gave you the answer in my other post with those css classes.

When you hide it with display:none you must show it with display:table-row not display:block otherwise you change it to a block element and is no longer a table-row.

However, IE still needs display:block.

You can get around it by doing this instead.

Code:

function display(obj,id1) 
{
    txt = obj.options[obj.selectedIndex].value;
    document.getElementById(id1).style.display = 'none';
    /*document.getElementById(id2).style.display = 'none';*/
    
    if(txt.match(id1)) 
    {
        document.getElementById(id1).style.display = '';
    }
    /*if(txt.match(id2)) 
    {
        document.getElementById(id2).style.display = 'block';
    }*/
}

**fcarpio** · May 27, 2011 12:04

It works.

Thank you and have a nice long Memorial day weekend (assuming you are in the USA),

FC

User Tag List

Thread: Help with CSS display:none

Thread Tools

Display

Help with CSS display:none

Bookmarks

Bookmarks

Posting Permissions