• Status: Solved
  • Priority: Medium
  • Security: Public
  • Views: 194
  • Last Modified:

hidding a table

I would like to hide the customers billing information by default and show the information by checking a checkbox. The code works the way I want it to in Firefox and Safari and Chrome but will not work in IE. Does anyone know a simple way to make this work across all recent browsers?
<html>
<head>
<script type="text/javascript">
function showCheckBoxDiv (DivName, box)
{
vis = (box.checked) ? "block" : "none";
document.getElementById(DivName).style.display = vis;
}
</script>
</head>
<body>
 
<table border="0" cellpadding="2" cellspacing="0" width="100%">
<tr><td width="50%" class="checkoutListHeader" align="left" valign="middle">
        <b>Ship To:</b>
</td><td width="50%" class="checkoutListHeader" align="left" valign="middle">
        <input type="checkbox" name="customerbilling" onclick="showCheckBoxDiv('customerbilling', this)">
        <b>&nbsp;Check if billing information is different.</b>
</td></tr>
<tr><td align="left" valign="top">
        
        <!-- Shipping Information -->
        <table class="customeredit" border="0" cellpadding="2" cellspacing="0">
        <tr><td align="left" valign="middle">
        <b>First Name:</b>
        </td><td align="left" valign="middle">
        <input type="text" name="Customer_ShipFirstName" size=25 value="Customer_ShipFirstName;">
        </td></tr>
        </table>
 
</td><td align="left" valign="top">
<div id="customerbilling" style="display:none;">
 
        <!-- Billing Information -->
        <table class="customeredit" border="0" cellpadding="2" cellspacing="0">
        <tr><td align="left" valign="middle">
        <b>First Name:</b>   
        </td><td align="left" valign="middle">   
        <input type="text" name="Customer_BillFirstName" size=25 value="Customer_BillFirstName;">  
        </td></tr>
        </table>
 
</div>
</td></tr>
</table>        
 
</body>
</html>

Open in new window

0
Gary Samuels
Asked:
Gary Samuels
  • 2
1 Solution
 
abelCommented:
You have by accident names two elements the same. Remove name="customerbilling" from the input checkbox and it will work. I pasted the full code again, which now works.

Remember that names and ids are basically the same (names are leftovers from ancient times) and though one element can have both an id and a name, they must be the same, but two elements may never share the same id or name.



<html>
<head>
<script type="text/javascript">
function showCheckBoxDiv (DivName, box)
{
vis = (box.checked) ? "block" : "none";
document.getElementById(DivName).style.display = vis;
}
</script>
</head>
<body>
 
<table border="0" cellpadding="2" cellspacing="0" width="100%">
<tr><td width="50%" class="checkoutListHeader" align="left" valign="middle">
        <b>Ship To:</b>
</td><td width="50%" class="checkoutListHeader" align="left" valign="middle">
        <input type="checkbox" onclick="showCheckBoxDiv('customerbilling', this)">
        <b> Check if billing information is different.</b>
</td></tr>
<tr><td align="left" valign="top">
 
        <!-- Shipping Information -->
        <table class="customeredit" border="0" cellpadding="2" cellspacing="0">
        <tr><td align="left" valign="middle">
        <b>First Name:</b>
        </td><td align="left" valign="middle">
        <input type="text" name="Customer_ShipFirstName" size=25 value="Customer_ShipFirstName;">
        </td></tr>
        </table>
 
</td><td align="left" valign="top">
<div id="customerbilling" style="display:none;">
 
        <!-- Billing Information -->
        <table class="customeredit" border="0" cellpadding="2" cellspacing="0">
        <tr><td align="left" valign="middle">
        <b>First Name:</b>
        </td><td align="left" valign="middle">
        <input type="text" name="Customer_BillFirstName" size=25 value="Customer_BillFirstName;">
        </td></tr>
        </table>
 
</div>
</td></tr>
</table>
 
</body>
</html>

Open in new window

0
 
b0lsc0ttCommented:
garysamuels,

The expert above is right that the duplication is the issue.  I did want to correct a point or two though.  An Id can't be duplicated in the rest of the html but a name can.  Also the id and name do not need to match in an element.  The reason the code is having a problem in IE and not the other browsers is IE (incorrectly in my opinion) will use the name's value when an Id isn't set in an element.  Thus even though you only have one element with the Id IE browser sees two with it.  The input is what IE gets when you use getElementById in your code.

Abel has provided the solution though but I hope this helps and clarifies how the Id and Name are used in element attributes.  Let me know if you have any questions or need more information.

b0lsc0tt
0
 
abelCommented:
Thanks for putting the dots on the i, b0lsc0tt. I figured going into too much detail wouldn't make it clearer, but you explained the concept nice and briefly. There's also the problem with posting input elements, but let's not take it too deep. To avoid such matters, on input elements I always put a name and an id, and on any other element, if needed at all, only an id.

That's just my rule of thumb to keep it simple.

-- Abel --
0
 
Gary SamuelsPlant ManagerAuthor Commented:
Thank you for the help.
0

Featured Post

Independent Software Vendors: We Want Your Opinion

We value your feedback.

Take our survey and automatically be enter to win anyone of the following:
Yeti Cooler, Amazon eGift Card, and Movie eGift Card!

  • 2
Tackle projects and never again get stuck behind a technical roadblock.
Join Now