|
Subject:
|
How to retain form values from dependent list ?
|
|
Posted By:
|
George B
|
Post Date:
|
9/15/2006 3:54:06 PM
|
Hello p2p,
I have a html page (ad_form_online.html) with 2 selection lists. There is a parent list (Category) and the other one (Subcategory) is dependent on this parent. The second list is populated depending on the parent list selection.
My Problem: I want to retain the values on the 2 selection lists after submit. I am able to retain the first list values and the second list's select element, but not second list's array (It defaults to the first of five arrays).
How can I retain the 2nd selection list array values after submitting a form? Any suggestions would be really helpful...
Thank you in advance,
George
~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~
The JavaScript code:
<script language="javascript" type="text/javascript">
<!-- Begin category select
// declare arrays
var Business = new Array("Bus. Cards","Employment","Services", "", "", "", "", "");
var Household = new Array("Antiques", "Appliances", "Collectibles", "Electronics",
"Furniture", "Musical Instr.", "Other HH", "Sporting Goods");
var Miscellaneous = new Array("Baby / Kids", "Jewelry", "Office Equipment", "Other Misc.",
"Pets / Animals", "Tools", "Wanted", "Yard Equipment");
var Real_Estate = new Array("Home / Commercial", "Land / Acreage", "Rentals", "Vacation", "", "", "", "");
var Vehicles = new Array("Antique / Classic", "Autos / MiniVans", "Cycle / OHRVs", "Parts /
Accy", "RVs / Trailers", "Trucks / Vans / SUVs", "Watercraft / Accy", "");
function swapOptions(the_array_name)
//ex. If you selected "Business," the_array_name will equal the string "Business"
{
var numbers_select = window.document.FrontPage_Form1.O2_Subcategory;
//Sets a variable to refer to the second list, the Subcategory.
var the_array = eval(the_array_name);
//The result of this line is that the variable the_array will equal one of the arrays //defined above. If the_array_name is Business, the_array will equal the Business array.
setOptionText(window.document.FrontPage_Form1.O2_Subcategory, the_array);
//Does the work of setting the values of the list select to the contents of the_array.
}
function setOptionText(the_select, the_array)
var deel1 = 0
{
for (loop=0; loop < the_select.options.length; loop++)
{
the_select.options[loop].text = the_array[loop];
}
}
//The options property of a select element is an array of all that select's options. Because //it's an array, you can find out how many options are in a select using the length property //of arrays.
//The first time you hit the loop, the loop variable equals 0. If you selected "Household", //the_array[0] will be "Antiques", so this line will change the first option in the list //select to "Antiques". The next time through the loop, loop[1] second option in the list //select will equal "Appliances", etc.
//End category select-->
</script>
~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~
My form code:
form enctype="multipart/form-data" method="POST" onsubmit="return FrontPage_Form1_Validator(this)" language="JavaScript" name="FrontPage_Form1">
<table width="640" bgcolor="#dedede" align="center" valign="middle" cellpadding="8"
cellspacing="0" border="1" bordercolor="#111111">
<tr>
<td align="right"><b>Category & Subcategory </b><font color="#00a000" size="5" />*
<font color="#000000" size="2" /> :
<br />
(select a category and a subcategory) </td>
<td align="center">
<table width="94%" border="1" cellpadding="5" cellspacing="0" style="border-collapse:
collapse;" bordercolor="#111111">
<tr>
<td width="120" height="26" align="center">
<font size="2" /><b>Category</b></td>
<td width="190" height="26" align="center">
<font size="2" /><b>Subcategory</b></td>
</tr>
<tr>
<td width="120" align="center">
<select size="5" name="O1_Category"
onChange="swapOptions(window.document.FrontPage_Form1.O1_Category.options[selectedIndex].text
);" />
<option>Business </option>
<option>Household </option>
<option>Miscellaneous </option>
<option>Real_Estate </option>
<option>Vehicles </option>
</td>
<td width="190">
<select size="5" name="O2_Subcategory" />
<option>Bus. Cards</option>
<option>Employment</option>
<option>Services</option>
<option></option>
<option></option>
<option></option>
<option></option>
<option> .</option>
</td>
</tr>
</table>
</td>
</tr>
</table>
|
|
