PDA

View Full Version : Pop Up Window with New Drop Down List Nested in An Existing Drop Down List

ChattanoogaRay
10-27-2003, 09:50 AM
I have spent the last three hours trying to find tutorials or examples of what I am attempting to do but thus far I hav been unsuccesssful in my search. I have an exising pull down menu for customers to choose their shipping rates. However I need to creat an "Other" category which will open up a new fixed sized windows with insurance rates in excess of 25000. Upon selection in my new drop down list I would like that value to update my value in the "Other" category in my main form and also close the pop up window upon the new selection. Anyone know any tuts out there that can help me with this? Or any completed examples I can pick a way at? Thanks for the help. Here is the code for my main pull down menu:

<select name="uspsField" onChange="document.orderfm.total_4.value = this.options[this.selectedIndex].value; UpdateTotals()">
<option>USPS Insurance Rates</option>
<option value="$8.00">$0.01 to $100.00</option>
<option value="$8.85">$100.01 to $500.00</option>
<option value="$9.70">$501.00 to $1,000.00</option>
<option value="$10.55">$1,000.01 to $2,000.00</option>
<option value="$11.40">$2,000.01 to $3,000.00</option>
<option value="$12.25">$3,000.01 to $4,000.00</option>
<option value="$13.10">$4,000.01 to $5,000.00</option>
<option value="$13.95">$5,000.01 to $6,000.00</option>
<option value="$14.80">$6,000.01 to $7,000.00</option>
<option value="$15.65">$7,000.01 to $8,000.00</option>
<option value="$16.50">$8,000.01 to $9,000.00</option>
<option value="$17.35">$9,000.00 to $10,000.00</option>
<option value="$17.35">$10,000.01 to $25,000.00</option>
</select>


Here is the code for my new pop up window:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
<head>
<title>USPS Shipping $10.001 to $25,000</title>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
</head>

<body>
<table>
<form action="order.htm" method="get">
<tr><td>
<select name="extuspsField">
<option>USPS Insurance Rates</option>
<option value="$18.20">$10,000.01 to $11,000.00</option>
<option value="$19.05">$11,000.01 to $12,000.00</option>
<option value="$19.90">$12,000.01 to $13,000.00</option>
<option value="$20.75">$13,000.01 to $14,000.00</option>
<option value="$21.60">$14,000.01 to $15,000.00</option>
<option value="$22.45">$15,000.01 to $16,000.00</option>
<option value="$23.30">$16,000.01 to $17,000.00</option>
<option value="$24.15">$17,000.01 to $18,000.00</option>
<option value="$25.00">$18,000.01 to $19,000.00</option>
<option value="$25.85">$19,000.01 to $20,000.00</option>
<option value="$26.70">$20,000.01 to $21,000.00</option>
<option value="$27.55">$21,000.01 to $22,000.00</option>
<option value="$28.40">$22,000.01 to $23,000.00</option>
<option value="$29.25">$23,000.01 to $24,000.00</option>
<option value="$30.10">$24,000.01 to $25,000.00</option>
</select>
</td></tr>
<tr><td><input name="Submit" type="submit"></td></tr>
</form>
</table>
</body>
</html>
Vincent Puglia
10-27-2003, 03:36 PM
Hi,

Not sure that I understand, but...

on main page, user clicks 'other', a window pops up, user clicks option, window closes, other option in main page window select gets altered (value changed?)

see the 'Appending Selects from Child' at my GrassBlade Javascript site (link in my sig)

for updating 'other', you do not need to use new Option -- since the option already exists -- you only need to access it and change the value/text --

if (selObj.options[someNdx].text == 'Other')
{
selObj.options[someNdx].value = thePassedValue;
selObj.options[someNdx].text = thePassedText;
}

Vinny
ChattanoogaRay
10-28-2003, 12:35 AM
Thanks for the link. I have been working on it but am still unsuccessful. What I am trying to do (due to the size of the form and limited print room left) is to creak a drop down menu as below in the main form:

(order.htm - form name: orderfm)
<select name="uspsField" onChange="document.orderfm.total_4.value = this.options[this.selectedIndex].value; UpdateTotals()">
<option>USPS Insurance Rates</option>
<option value="$8.00">$0.01 to $100.00</option>
<option value="$8.85">$100.01 to $500.00</option>
<option value="$9.70">$501.00 to $1,000.00</option>
<option value="$10.55">$1,000.01 to $2,000.00</option>
<option value="$11.40">$2,000.01 to $3,000.00</option>
<option value="$12.25">$3,000.01 to $4,000.00</option>
<option value="$13.10">$4,000.01 to $5,000.00</option>
<option value="$13.95">$5,000.01 to $6,000.00</option>
<option value="$14.80">$6,000.01 to $7,000.00</option>
<option value="$15.65">$7,000.01 to $8,000.00</option>
<option value="$16.50">$8,000.01 to $9,000.00</option>
<option value="$17.35">$9,000.00 to $10,000.00</option>
<option value="????">$10,000.01 to $25,000.00</option>
</select>

Then for the last option ($10,000.01 to $25,000.00) I would like a pop up window occur upon an onSelect event. The new window would then have another drop down menu further breaking the rates apart as below:

(uspspopup.htm - form name: uspsForm)
<select name="extuspsField" onChange="sendBack('$2.00')">
<option>USPS Insurance Rates</option>
<option value="$18.20">$10,000.01 to $11,000.00</option>
<option value="$19.05">$11,000.01 to $12,000.00</option>
<option value="$19.90">$12,000.01 to $13,000.00</option>
<option value="$20.75">$13,000.01 to $14,000.00</option>
<option value="$21.60">$14,000.01 to $15,000.00</option>
<option value="$22.45">$15,000.01 to $16,000.00</option>
<option value="$23.30">$16,000.01 to $17,000.00</option>
<option value="$24.15">$17,000.01 to $18,000.00</option>
<option value="$25.00">$18,000.01 to $19,000.00</option>
<option value="$25.85">$19,000.01 to $20,000.00</option>
<option value="$26.70">$20,000.01 to $21,000.00</option>
<option value="$27.55">$21,000.01 to $22,000.00</option>
<option value="$28.40">$22,000.01 to $23,000.00</option>
<option value="$29.25">$23,000.01 to $24,000.00</option>
<option value="$30.10">$24,000.01 to $25,000.00</option>
</select>

Obviously the reason I would want this sub menu is because of the total length of the menu. The reason why I want it in a seperate window is so that I do not have eat away at hard space in the form. I would like the Name in each of the option fields update as well as the value so my value would then update on my main page with the new value in my totals column. I hope this better explains it. Its much like what you did in your nested area but of course it was done with buttons and check boxes and radio buttons. Needless to say it was a solid 3 hrs of grey hair birth as I attempted to break the script apart to understand what everything was doing and how I could get it to work with what I was doing. But I kept getting errors galore. So if you have or know any tuts or examples of what I am looking for I would greatly appreciate it.
ChattanoogaRay
10-28-2003, 07:47 AM
I have figured out your solution. However if I use your solution it applies to everything in my main pull down menu. However I only want the pop-up to occur if the user chooses the last option in the select field. Also I have another onChange effect (onChange="document.orderfm.total_4.value = this.options[this.selectedIndex].value; UpdateTotals()") which updates a text field with the value of the selected choice. Is it possible to have both of these scripts work together? One script to update the text field for the value of the selected drop down menu and one script to update my main page's value for only one <option> through the use of your handy dandy pop-up menu technique?