saving state of a dynamic form

[patricia_e]

Hi,
I'm trying to create a form with 2 drop-down input fields. The 2nd input options depend upon what a user chooses in the first drop-down. I have that piece working.

However, when the user pushes the submit button, they cannot go back (hit the back button) and see their previous choices. Furthermore, the 2nd drop-down becomes inoperable unless the user has the wherewithal to refresh the page. I don't want to give them the benefit of the doubt to know they have to hit refresh. I'd like to somehow "save the state" of their choices.

I have been reading about different options used to save state (cookies, sessions, mysql db, hidden fields, etc.). To be honest, I don't know which one to choose. The information is not sensitive and is very simple.

I have included the code below. Does anyone have any suggestions or can anyone point me to an example somewhere? I have been looking at code for shopping carts but I am not a stellar programmer, so they confuse the heck out of me.

Any help you can give would be greatly appreciated!
Sincerely,
Patricia

<script language="javascript" type="text/javascript">
<!-- Hide script from older browsers

//To define an array, use the following form:
//var Name_of_Array= new Array(number_of_elements);

//define a new Array object but don't say how many elements it has.
var arr = new Array();

arr[0] = new Array(); // answer Yes
arr[0][0] = new makeOption("Select a program option");

arr[1] = new Array(); // answer No
arr[1][0] = new makeOption("Select a program option");
arr[1][1] = new makeOption("PSI");
arr[1][2] = new makeOption("HR");

arr[2] = new Array(); // answer Yes
arr[2][0] = new makeOption("Select a program option");
arr[2][1] = new makeOption("ULI");
arr[2][2] = new makeOption("PSI");
arr[2][3] = new makeOption("HR");
arr[2][4] = new makeOption("SSS");

// End hiding script -->
</script>

<!-- BEGIN FORM******************** -->
<form action="b_ULI_PSI.php" method="post" name="theForm" id="theForm">

<p><strong>Are you a Supervisor of Classified Staff or Appointed Personnel?</strong></p>

<p><select name="areYouSupervisor" onChange="resetProgramOptions(this.form)">
<option value="" selected>Select an option</option>
<option value="no">no</option>
<option value="yes">yes</option>
</select><br /><br /><br />
</p>

<p><strong>Your Options:</strong></p>

<select name="program" onChange="resetAction(this.form);">
<option value="" selected>Select a program option</option>
</select><br /><br /><br />

<input type="submit" value="Continue to Registration" onClick="return submitIt();">

</form>
<!-- END FORM******************** -->

[MichaelBluejay]

I thought this would be as simple as assigning a global variable (window.myVariable) and accessing it, but I tested it and it didn't work. The problem is that in my browser the page doesn't reload when you hit the Back button, so there's nothing to trigger JavaScript events. That being the case, I doubt it's possible to have fields go back to the way they were when the user hits the Back button. If there really is a way to do this I'd sure like to hear about it too.