Forum Moderators: open

Message Too Old, No Replies

Really easy question about divs

         

Joe_Schmoo

2:42 am on Jul 9, 2004 (gmt 0)

10+ Year Member



Hi,

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>&nbsp;</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 %>&amp;cityname=<%= cityname %>&amp;offer=<%=Offer %>" ><IMG height=30 src="art/tab_moreoffers3_off.gif" width=144 border=0 ></A></td>
<!-- <td align="right">&nbsp;</td> --></tr>
<tr>
<td align=left><IMG height=16 src="art/formcorner_ul_y.gif" width=16 ></td>
<td width=306 colSpan=3>&nbsp;</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
>&nbsp;&nbsp;&nbsp;</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>&nbsp;CA&nbsp;&nbsp;&nbsp;&nbsp;
</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>

Joe_Schmoo

2:43 am on Jul 9, 2004 (gmt 0)

10+ Year Member



by the way, please disregard the typo for the ending div tag, it is correct in my page and I pasted it wrong.

Stefan

2:50 am on Jul 9, 2004 (gmt 0)

WebmasterWorld Senior Member 10+ Year Member



by the way, please disregard the typo for the ending div tag, it is correct in my page and I pasted it wrong.

:-)

Welcome to WW. The incredible thing about this place is that someone will probably read all that code and figure out your problem. Good luck.

Joe_Schmoo

3:05 am on Jul 9, 2004 (gmt 0)

10+ Year Member



I know it's a lot but I'm totally stumped and appreciate the help.

TheDave

3:21 am on Jul 9, 2004 (gmt 0)

10+ Year Member



I think what you need to do is simplify your code. Eliminate everything and anything not related to your problem. Here is what I would suggest:

<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>

Joe_Schmoo

3:49 am on Jul 9, 2004 (gmt 0)

10+ Year Member



Okay, here is some simplified code. I'm having the same problem, but maybe it will be easier to track down now. - Thanks

<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>

tedster

4:28 am on Jul 9, 2004 (gmt 0)

WebmasterWorld Senior Member 10+ Year Member



Hi - and welcome to the forums.

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.

TheDave

4:40 am on Jul 9, 2004 (gmt 0)

10+ Year Member



Yes definately need to validate that HTML. Your problem is you are trying to put a div around a bunch of table cells, but a div can't wrap a group of cells, only a whole table. What you have is

<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>

Joe_Schmoo

4:55 am on Jul 9, 2004 (gmt 0)

10+ Year Member



Thanks a bunch! Those errors were from cutting and pasting, but the real error was with the divs aroung the data cells.