Forum Moderators: open
I have an asp page that has a 2 radio buttons and a set of input boxes. When I click on the 1rst radio button I need the input boxes to disappear. I am trying to use a set of div tags around the whole chunck of html that creates the inputs but they are not disppearing when clicking on the radion button. I'm sure I have the div tags set up wrong because I've never used them before. Here is some of my code. Can you tell me what I'm doing wrong? The name of the div tag is 'divaddress' so you can locate it.
Javascript function:
function Billship_OnClick()
{
document.getElementById("divaddress").style.display = "none";
}
html:
<form name=form1 action="<%= strSecPath %>procchkout_dyn.asp" method=post
><input type=hidden value="<%=UserID%>" name=UserID
> <input id=Hidden1 type=hidden name=CardType
> <input id=Hidden2 type=hidden name=AuthReq
> <input type=hidden value="<%=Offer%>" name=HTMLEmail
> <input type=hidden value=CA name=State
>
<table cellSpacing=0 cellPadding=0 align=center bgColor=#ffcc66 border=0
>
<tr bgColor=#ffffff>
<td> </td>
<td vAlign=bottom align=left colSpan=4><img
height=30 src="<% = offerTab %>" width=144><A href="splash_moreoffers_1214.asp?more_offers=<%= source_code & campaign_code %>&cityname=<%= cityname %>&offer=<%=Offer %>" ><IMG height=30 src="art/tab_moreoffers3_off.gif" width=144 border=0 ></A></td>
<!-- <td align="right"> </td> --></tr>
<tr>
<td align=left><IMG height=16 src="art/formcorner_ul_y.gif" width=16 ></td>
<td width=306 colSpan=3> </td>
<td align=right><IMG height=16 src="art/formcorner_ur_y.gif" width=16 ></td></tr>
<!-- ------Offer Details ------ -->
<tr>
<td vAlign=top align=right><img
src="<%=graphic1%>" align=absMiddle
> </td>
<td align=left colSpan=2><img
src="<%=graphic2%>" align=absMiddle></td>
<%
if dealID = "W113" then
Graphic3 = "offers/art/Percent_W113.gif"
else
Graphic3 = graphic3
end if
%>
<td align=right colSpan=2><img
src="<%=graphic3%>" align=absMiddle></td></tr>
<tr>
<td colSpan=5>
<hr>
</td></tr>
<tr>
<td noWrap align=right>First Name: <IMG height=8 src="images/required.gif" width=8 ><IMG height=10 src="art/pix.gif" width=4 ></td>
<td align=left width=191><input tabIndex=1
type=text size=25 value="<%= Firstname %>" name=Firstname
> </td>
<td noWrap><IMG height=1 src="images/pix.gif" width=8 ></td>
<td noWrap align=right width=83>Address: <IMG height=8 src="images/required.gif" width=8 ><IMG height=10 src="art/pix.gif" width=4 ></td>
<td noWrap align=left><input tabIndex=6
type=text size=25 value="<%= Address %>" name=Address
> </td></tr>
<tr>
<td noWrap align=right>Last Name: <IMG height=8 src="images/required.gif" width=8 ><IMG height=10 src="art/pix.gif" width=4 ></td>
<td noWrap align=left width=191><input
tabIndex=2 type=text size=25 value="<%= Lastname %>" name=Lastname
> </td>
<td noWrap><IMG height=1 src="images/pix.gif" width=8 ></td>
<td noWrap align=right width=83>Apt: <IMG height=8 src="images/pix.gif" width=8 ></td>
<td noWrap align=left><input tabIndex=7
type=text size=25 value="<%= Apt %>" name=Apt>
</td></tr>
<tr>
<td noWrap align=right>E-Mail Address: <IMG height=8 src="images/required.gif" width=8 ><IMG height=10 src="art/pix.gif" width=4 ></td>
<td noWrap align=left width=191><input
tabIndex=3 type=text size=25 value="<%= mail %>" name=e-mail
> </td>
<td noWrap><IMG height=1 src="images/pix.gif" width=8 ></td>
<td noWrap align=right width=83>City: <IMG height=8 src="images/required.gif" width=8 ><IMG height=10 src="art/pix.gif" width=4 ></td>
<td noWrap align=left>
<% If CityName="the Bay Area" Then CityName="" End If %>
<input tabIndex=8 type=text size=25 value="<%= CityName %>"
name=City> CA
</td></tr>
<!-- -------Offer ---- HTMLEmail --------- -->
<tr>
<td noWrap align=right>Phone: <IMG height=8 src="images/required.gif" width=8 ><IMG height=10 src="art/pix.gif" width=4 ></td>
<td noWrap align=left width=191><input
tabIndex=5 type=text value="<%= Phone %>" name=Telephone
sixe="25"> </td>
<td noWrap><IMG height=1 src="images/pix.gif" width=8 ></td>
<td noWrap align=right width=83>Zip Code: <IMG height=8 src="images/required.gif" width=8 ><IMG height=10 src="art/pix.gif" width=4 ></td>
<td noWrap align=left><input tabIndex=10
type=text maxLength=5 size=10 value="<%= ZipFive %>" name=ZipFive
> </td></tr>
<tr>
<div id="divaddress"><td noWrap align=right>First Name: <IMG height=8 src="images/required.gif" width=8 ><IMG height=10 src="art/pix.gif" width=4 ></td></div>
<td align=left width=191><input tabIndex=1 type=text size=25 value="" name=Firstname2 ID="Firstname2"></td>
<td noWrap><IMG height=1 src="images/pix.gif" width=8 ></td>
<td noWrap align=right width=83>Address: <IMG height=8 src="images/required.gif" width=8 ><IMG height=10 src="art/pix.gif" width=4 ></td>
<td noWrap align=left><input type=text size=25 value="" name=Address2 ID="Address2"> </td>
div>
</tr>
<TD align=right>Billing Address: <IMG height=8 src="images/required.gif" width=8 ><IMG height=10 src="art/pix.gif" width=4 ></TD>
<TD width=191><INPUT id=Radio3 type=radio
value="Same as Delivery" name=Billship onclick=Billship_OnClick()> Same as
Delivery Address</TD>
<TD></TD>
<TD align=right width=83><INPUT id=Radio2
type=radio value="Separate Billing Address" name=Billship
></TD>
<td colSpan=5>Separate Billing Address </td></tr>
<html><head>
<script>
function BillShip()
{
document.getElementById('billaddress').style.display = "none";
}
</script>
</head>
<body>
<form name="form1">
<input type="radio" onclick="BillShip()">
<div id="billaddress">Shipping address</div>
</form>
</body>
<script language=javascript>
function Billship_OnClick()
{
document.getElementById("divaddress").style.display = "none";
}
</script>
</HEAD>
<body bgColor=#000000>
<table cellPadding=10 width=680 align=center bgColor=#ffffff>
<tr>
<td>
<!-- -------Begin Form------- -->
<form name=form1 action="<%= strSecPath %>procchkout_dyn.asp" method=post
<table cellSpacing=0 cellPadding=0 align=center bgColor=#ffcc66 border=0
<tr>
<div id="divaddress"><td noWrap align=right>First Name: <IMG height=8 src="images/required.gif" width=8 ><IMG height=10 src="art/pix.gif" width=4 ></td>
<td align=left width=191><input tabIndex=1 type=text size=25 value="" name=Firstname2 ID="Firstname2"></td>
<td noWrap><IMG height=1 src="images/pix.gif" width=8 ></td>
<td noWrap align=right width=83>Address: <IMG height=8 src="images/required.gif" width=8 ><IMG height=10 src="art/pix.gif" width=4 ></td>
<td noWrap align=left><input type=text size=25 value="" name=Address2 ID="Address2"> </td></div>
</tr>
<tr>
<TD align=right>Billing Address: <IMG height=8 src="images/required.gif" width=8 ><IMG height=10 src="art/pix.gif" width=4 ></TD>
<TD width=191><INPUT id=Radio3 type=radio
value="Same as Delivery" name=Billship onclick=Billship_OnClick()> Same as
Delivery Address</TD>
<TD></TD>
<TD align=right width=83><INPUT id=Radio2
type=radio value="Separate Billing Address" name=Billship
></TD>
<td colSpan=5>Separate Billing Address </td></tr>
</table>
</form>
</body></HTML>
I suggest you use the W3Cs HTML validator [validator.w3.org] (or maybe another validator) to find any errors in your table, row, and cell tags. The mark-up you've posted here does have structural errors - such as following a </td> immediately with a <tr> in the first example.
While I realize this may just be copy/paste error, you want to handle that level of errors in the basic HTML first before you try to debug dHTML scripts. Otherwise you may spin in circles.
<table>
<tr><td>TextA</td></tr>
<div>
<tr><td>TextB</td></tr>
</div>
</table>
What you probably need to have is something like this
<table>
<tr><td>TextA</td></tr>
</table>
<div>
<table>
<tr><td>TextB</td></tr>
</table>
</div>