Tek-Tips is the largest IT community on the Internet today!

Members share and learn making Tek-Tips Forums the best source of peer-reviewed technical information on the Internet!

Register Log in
  • Congratulations strongm on being selected by the Tek-Tips community for having the most helpful posts in the forums last week. Way to Go!

keeping hidden/visib Div visible after hitting back button

Status
Not open for further replies.
rshandy

rshandy

Technical User
Dec 26, 2003
91
US
I have a div on a form which visibility is controlled by two radio buttons. When the user picks the radio button "my shipping address is different from my billing address", the div becomes visible and contains additional fields for their shipping info.

they then submit the form ...no problem. If they then hit the back button, however, the div doesn't stay visible.

If you then hit the radio button again the div becomes visible and the form data is still intact.

How do I keep the div visible if the user hits the back button?

Also, if the user doesn't choose to make the additional form fields visible, then the form should stay invisible upon click the back button.
below is a scaled down version of the form:

<html>
<head>
<title>Untitled Document</title>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
<script language="JavaScript">
function ShowHide(shipdivValue) {
if (shipdivValue == '1') {
document.getElementById('addShipInfo').style.visibility = "visible";
document.getElementById('addShipInfo').style.display = "inline";
}else{
document.getElementById('addShipInfo').style.visibility = "hidden";
document.getElementById('addShipInfo').style.height = '0';
document.getElementById('addShipInfo').style.display = "none";
}
}
</script>
</head>

<BODY bgColor="#ffffff" leftMargin="0" topMargin="0" MARGINHEIGHT="0" MARGINWIDTH="0" onLoad="ShowHide('0');">
<form action="/cgi-bin/Chk.pl" name="billShip" method="post">
<table width="345" border="0" cellspacing="0" cellpadding="2">
<tr>
<td class="Arial10Bold" colspan="3"><img src="images/transparent.gif" width="4" height="8" border="0"></td>
</tr>
<tr>
<td class="Arial11Bold" colspan="3">
<div class ="Arial11Bold"><img src="images/transparent.gif" width="8" height="8" border="0">Please
enter your billing information as shown on your credit card statement.</div>
<div class ="Arial10Bold"><img src="images/transparent.gif" width="8" height="8" border="0">Required
fields are designated with a red asterisk (<font color="#ff0000">*</font>).</div>
</td>
</tr>
<tr>
<td class="Arial10Bold"><img src="images/transparent.gif" width="123" height="10" border="0"></td>
<td class="Arial10Bold"><img src="images/transparent.gif" width="163" height="8" border="0"></td>
<td class="Arial10Bold"><img src="images/transparent.gif" width="225" height="8" border="0"></td>
</tr>
<tr>
<td align="right"><span class="Arial10Regular">First Name<font color="#ff0000">*</font></span></td>
<td>
<input class="Arial10Regular" type=text name="bill_to_name" size=33 maxlength=50 id="bill1">
</td>
<td>&nbsp;</td>
</tr>
<tr>
<td align="right"><span class="Arial10Regular">Last Name<font color="#ff0000">*</font></span></td>
<td>
<input class="Arial10Regular" type=text name="bill_to_name2" id="bill2" size=33 maxlength=50>
</td>
<td>&nbsp;</td>
</tr>

</table>
<table cellspacing=0 cellpadding=2 width="345" border=0 align="center" bordercolor="#FFFFFF">
<tbody>
<tr align="left">
<td colspan="2"><img src="images/transparent.gif" width="2" height="4" border="0"></td>
</tr>
<tr align="left">
<td colspan="3" class="Arial11Bold"><input type="radio" id ="shipAdd" name="shipto" value="0" onClick="ShowHide('0');" checked>My shipping address is the same as my billing
address</td>
</tr>
<tr align="left">
<td colspan="3" class="Arial11Bold">
<input type="radio" name="shipto" id ="shipAdd2" value="1" onclick="ShowHide('1');">Please send my order to a different shipping
address</td>
</tr>
<tr align="left">
<td colspan="3">
<hr noshade size=1>
</td>
</tr>
<tr>
<td class="Arial10Bold"><img src="images/transparent.gif" width="123" height="8" border="0"></td>
<td class="Arial10Bold"><img src="images/transparent.gif" width="163" height="8" border="0"></td>
<td class="Arial10Bold"><img src="images/transparent.gif" width="225" height="8" border="0"></td>
</tr>
</tbody>
</table>
<div class="Arial10Regular" id="addShipInfo" name="shipstuff" position:relative; style="visibility:hidden;">
<table cellspacing=0 cellpadding=2 width="320" border=0 align="left" bordercolor="#FFFFFF">
<tbody>
<tr>
<td><img src="/images/transparent.gif" width="123" height="1" border="0"></td>
<td><img src="/images/transparent.gif" width="163" height="1" border="0"></td>
<td><img src="/images/transparent.gif" width="215" height="1" border="0"></td>
</tr>
<tr align="left">
<td colspan="3"><div class ="Arial11Bold"><img src="/images/transparent.gif" width="8" height="8" border="0">Enter the Recipient's shipping information here:</div><div class ="Arial10Bold"><img src="/images/transparent.gif" width="8" height="8" border="0">Required fields are designated with a red asterisk(<font color="#ff0000">*</font>).</div><img src="/images/transparent.gif" width="8" height="8" border="0"></td>
</tr>
<tr>
<td align="right"><span class="Arial10Regular">Recipient's First Name <font color="#ff0000">*</font></span></td>
<td><input class="Arial10Regular" name="ShipName" type="text" maxlength="50" size="33" id="ship1"></td>
<td></td>
</tr>
<tr>
<td align="right"><span class="Arial10Regular">Recipient's Last Name <font color="#ff0000">*</font></span></td>
<td><input class="Arial10Regular" name="ShipName2" type="text" maxlength="50" size="33" id="ship2"></td>
<td></td>
</tr>

<tr>
<td colspan="3"><img src="/images/transparent.gif" width="8" height="8" border="0"></td>
</tr>
</tbody>
</table>
</div>

<table width="750" border="0" cellspacing="0" cellpadding="0">
<tr valign="top">
<td colspan="2"><img src="images/transparent.gif" width="1" height="18" border="0"> </td>
</tr>
<TR>
<TD class="Arial14Bold" align=right colspan="2"><div class="Arial14Bold" id="OrderTotal"></div><BR>
<input type="image" NAME="submit" src="images/continue.gif" height="22" alt="Continue" width="104" vspace=10 border=0>
<img src="images/transparent.gif" width="12" height="18" border="0">
</TD>
</TR>

<tr valign="top">
<td></td>

<td width="190" class="Arial10Regular" align="right">&nbsp;</td>
</tr>
</table>

</form>
</body>
</html>

Thanks,

Rich
 
Sort by date Sort by votes
I just figured it out. I forgot the back button reads the "onload" function in the body tag. I created condition statement to check to see if the first field in ship part of the form has data and if so set div to visible and it seems to work fine.
 
Upvote 0 Downvote
Status
Not open for further replies.

Similar threads

scorney
  • Question
background image with overlay which Hover when over a specific Area/Form
Replies
1
Views
338
3esolar
3
waubain
  • Locked
  • Question
Prevent user from getting a 404 error if click on a hover text displaying a hidden image. 1
Replies
5
Views
146
jjgupta915
jjgupta915
tyutghf
  • Locked
  • Question
Slanted divs
Replies
0
Views
315
tyutghf
tyutghf
jason.lex
  • Locked
  • Question
crop image to fit in a div box?
Replies
2
Views
107
jason.lex
jason.lex
tyutghf
  • Locked
  • Question
Hide div on input focus
Replies
2
Views
80
tyutghf
tyutghf

Part and Inventory Search

Sponsor

Back
Top