cfetzer
asked on
JavaScript onload when using backbutton to return to previous page.
I need help with JavaScript. I am not very good with JavaScript so please bear with me...
I have a page, that has a dropdown list.. when an item is selected from the dropdown list, textboxes and labels for those textboxes will dynamically appear. Please see code below:
Javascript within <head> tags:
<script language="JavaScript">
<!--
function document_onload()
{
window.document.getElement ById("cust 1").style. display='b lock';
}
function populateArea(selected)
{
if(selected == "cust")
{
window.document.getElement ById("cust 1").style. display='b lock';
}
else
{
window.document.getElement ById("cust 1").style. display='n one';
}
if(selected == "natl")
{
window.document.getElement ById("natl 1").style. display='b lock';
}
else
{
window.document.getElement ById("natl 1").style. display='n one';
}
if(selected == "custcnsgne")
{
window.document.getElement ById("cust cnsgne1"). style.disp lay='block ';
window.document.getElement ById("cust cnsgne2"). style.disp lay='block ';
window.document.getElement ById("cust cnsgne3"). style.disp lay='block ';
}
else
{
window.document.getElement ById("cust cnsgne1"). style.disp lay='none' ;
window.document.getElement ById("cust cnsgne2"). style.disp lay='none' ;
window.document.getElement ById("cust cnsgne3"). style.disp lay='none' ;
}
}
//-->
</script>
<body onload="document_onload()" >
Here is the code for the dropdown list and the textboxes/text labels...
<Select name="rp_level" id="rp_level" onChange="javascript: populateArea(this.options[ this.selec tedIndex]. value); On">
<option value="cust" selected>
Customer
</option>
<option value="natl" >
National Account
</option>
<option value="custcnsgne">
Customer/Consignee
</option>
</Select>
Here is the code for the textboxes/labels:
<td width="125" align="right">
<span id="custcnsgne3" style="DISPLAY: none">
Customer Number:
</span>
<span id="cust1" style="DISPLAY: none">
Customer Number:
</span>
<span id="natl1" style="DISPLAY: none">
Natl Acct Number:
</span>
</td>
<td width="125">
<input TYPE="text" NAME="accnt_n" maxlength="7" WIDTH="7" ID="Text1">
</td>
<td width="100" align="right">
<span id="custcnsgne1" style="DISPLAY: none">
Consignee:
</span>
</td>
<td width="125">
<span id="custcnsgne2" style="DISPLAY: none">
<input TYPE="text" NAME="consignee" maxlength="7" WIDTH="7" ID="Text2">
</span>
</td>
Please note that this is not the complete page.. the page is fairly long and I tried to only include what is necessary for you to see what is going on. When the page loads, the "customer" selection is the default selection on the dropdown list. The Customer number and customer textbox is there by default when the page loads. The problem is this: If I chose one of the other options, for example "customer/consignee" the "customer number" label stays next to the customer text box, and a new label entitled "consignee" appears with a new text box appears next to it. The user enters a customer number, a consignee number and submits the page.. the report runs normally and is displayed on the next page. If the user hits the back button, the previous page returns and the dropdown list still shows customer/consignee, but the consignee label and text box is not there anymore.
What I need to happen is this: When the user hits the back button on the browser, that the selection choices along with the corresponding labels/boxes need to still be there and not default back as if the page was loaded for the first time.
I hope this makes sense.. I really need help so I welcome all suggestions!
C
I have a page, that has a dropdown list.. when an item is selected from the dropdown list, textboxes and labels for those textboxes will dynamically appear. Please see code below:
Javascript within <head> tags:
<script language="JavaScript">
<!--
function document_onload()
{
window.document.getElement
}
function populateArea(selected)
{
if(selected == "cust")
{
window.document.getElement
}
else
{
window.document.getElement
}
if(selected == "natl")
{
window.document.getElement
}
else
{
window.document.getElement
}
if(selected == "custcnsgne")
{
window.document.getElement
window.document.getElement
window.document.getElement
}
else
{
window.document.getElement
window.document.getElement
window.document.getElement
}
}
//-->
</script>
<body onload="document_onload()"
Here is the code for the dropdown list and the textboxes/text labels...
<Select name="rp_level" id="rp_level" onChange="javascript: populateArea(this.options[
<option value="cust" selected>
Customer
</option>
<option value="natl" >
National Account
</option>
<option value="custcnsgne">
Customer/Consignee
</option>
</Select>
Here is the code for the textboxes/labels:
<td width="125" align="right">
<span id="custcnsgne3" style="DISPLAY: none">
Customer Number:
</span>
<span id="cust1" style="DISPLAY: none">
Customer Number:
</span>
<span id="natl1" style="DISPLAY: none">
Natl Acct Number:
</span>
</td>
<td width="125">
<input TYPE="text" NAME="accnt_n" maxlength="7" WIDTH="7" ID="Text1">
</td>
<td width="100" align="right">
<span id="custcnsgne1" style="DISPLAY: none">
Consignee:
</span>
</td>
<td width="125">
<span id="custcnsgne2" style="DISPLAY: none">
<input TYPE="text" NAME="consignee" maxlength="7" WIDTH="7" ID="Text2">
</span>
</td>
Please note that this is not the complete page.. the page is fairly long and I tried to only include what is necessary for you to see what is going on. When the page loads, the "customer" selection is the default selection on the dropdown list. The Customer number and customer textbox is there by default when the page loads. The problem is this: If I chose one of the other options, for example "customer/consignee" the "customer number" label stays next to the customer text box, and a new label entitled "consignee" appears with a new text box appears next to it. The user enters a customer number, a consignee number and submits the page.. the report runs normally and is displayed on the next page. If the user hits the back button, the previous page returns and the dropdown list still shows customer/consignee, but the consignee label and text box is not there anymore.
What I need to happen is this: When the user hits the back button on the browser, that the selection choices along with the corresponding labels/boxes need to still be there and not default back as if the page was loaded for the first time.
I hope this makes sense.. I really need help so I welcome all suggestions!
C
ASKER CERTIFIED SOLUTION
membership
This solution is only available to members.
To access this solution, you must be a member of Experts Exchange.
thx
ASKER
I actually just solved it.. but I will award you the points since you (Bustarooms) put forth the effort to answer.. :-/
I did this (only modified the onload code):
function document_onload()
{
if(form1.rp_level.value == "cust")
{
window.document.getElement
}
else
{
window.document.getElement
}
if(form1.rp_level.value == "natl")
{
window.document.getElement
}
else
{
window.document.getElement
}
if(form1.rp_level.value == "custcnsgne")
{
window.document.getElement
window.document.getElement
window.document.getElement
}
else
{
window.document.getElement
window.document.getElement
window.document.getElement
}
}
Thanks for the help anyway :)