Link to home
Start Free TrialLog in
Avatar of cfetzer
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.getElementById("cust1").style.display='block';
                  }
                  function populateArea(selected)
                  {
                        if(selected == "cust")
                              {
                                    window.document.getElementById("cust1").style.display='block';
                              }
                              else
                              {
                                    window.document.getElementById("cust1").style.display='none';
                              }
                        if(selected == "natl")
                              {
                                    window.document.getElementById("natl1").style.display='block';
                              }
                              else
                              {
                                    window.document.getElementById("natl1").style.display='none';
                              }
                        if(selected == "custcnsgne")
                              {
                                    window.document.getElementById("custcnsgne1").style.display='block';
                                    window.document.getElementById("custcnsgne2").style.display='block';
                                    window.document.getElementById("custcnsgne3").style.display='block';
                              }
                              else
                              {
                                    window.document.getElementById("custcnsgne1").style.display='none';
                                    window.document.getElementById("custcnsgne2").style.display='none';
                                    window.document.getElementById("custcnsgne3").style.display='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.selectedIndex].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
ASKER CERTIFIED SOLUTION
Avatar of Bustarooms
Bustarooms
Flag of United States of America image

Link to home
membership
This solution is only available to members.
To access this solution, you must be a member of Experts Exchange.
Start Free Trial
Avatar of cfetzer
cfetzer

ASKER

Hey,

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.getElementById("cust1").style.display='block';
                              }
                              else
                              {
                                    window.document.getElementById("cust1").style.display='none';
                              }
                        if(form1.rp_level.value == "natl")
                              {
                                    window.document.getElementById("natl1").style.display='block';
                              }
                              else
                              {
                                    window.document.getElementById("natl1").style.display='none';
                              }
                        if(form1.rp_level.value == "custcnsgne")
                              {
                                    window.document.getElementById("custcnsgne1").style.display='block';
                                    window.document.getElementById("custcnsgne2").style.display='block';
                                    window.document.getElementById("custcnsgne3").style.display='block';
                              }
                              else
                              {
                                    window.document.getElementById("custcnsgne1").style.display='none';
                                    window.document.getElementById("custcnsgne2").style.display='none';
                                    window.document.getElementById("custcnsgne3").style.display='none';
                              }
                  }

Thanks for the help anyway  :)