Instantly update bottom frame when user changes menu selections in top frame

[jddela]

Hello,

This is an excellent website, and I'm hoping someone here can help me create what I need. I myself do not know any javascript or any other web programming language, but I have some programming experience, so I can usually "read" code if I understand what it's trying to do.


Okay, here's what I'm looking for:

Imagine a frameset with a top frame containing multiple dropdown menus, and a bottom frame that will load a specific page determined by the user's selections in the top frame. Every time the user changes something in the top frame, I want the bottom frame to be immediately updated with the correct page (no clicking of "submit" required). The pages to be displayed in the bottom frame already exist, and their filepaths and filenames are simple combinations of the selected menu values.

The menus are non-hierarchical. The values available in any given dropdown menu are independent of the values selected in other menus. (So, it is NOT like searching on cars.com, where you select a make, then select a model. In my system, you ARE be able to choose a Ford Impala, for example :) ).

The dropdown menus in the top frame should also have prev/next arrows that the user can click to quickly cycle through the available values.



---------------------------------------------
EXAMPLE:

Say I'm looking at farm output data, broken down by the following categories:

STATE: AZ, CA, NM
CROP: Corn, Rice, Wheat
Month: Jan-Dec
Measurement: Bushels, Tons, Dollars


The top frame of my frameset will have dropdown menus for each of these 4 categories (State, crop, month, and measurement).

For each unique combination of the 4 categories, I have a specific web page that I want to display in the bottom frame of the frameset. The path and filename of each page is a direct function of the selected values (e.g. the AZ November Corn Tonnage page might be AZ/NOV/CORN/TONS/AZ_NOV_CORN_TONS.HTM).

I've attached a simple picture of what I'd like the menu to look like.
---------------------------------------------


Like I said earlier, I'm no web programmer, but I think the script will work something like this:

1. User changes a value of a menu item.
2. The displayed value in the menu is changed to show the newly selected value.
3. A string is generated that is a concatenation of the selected values of all the menus. This string is the path and filename of the page to be loaded in the bottom frame.
4. The bottom frame is loaded with the file whose name was formed in the previous step.



Is there anyone who can give me pointers or write some basic code for accomplishing what I'm describing? Any help you can provide would be greatly appreciated! Thanks!

JIM

[Nile]

I can help you, but is there a specific reason why both need to be frames? If the bottom one needs to be a frame, I'd understand that (a little) - but I dont think its necessary that the top is also a frame.

[jddela]

Hi,

I think I need frames, but I could be wrong. The htm files that will be loaded in the bottom frame are pre-generated, so I can't add any code to those files. That is why I was thinking I need to use frames. I am no expert, though. My knowledge is limited to what I know how to do using FrontPage 2003, so I'm sort of an uneducated dinosaur. I don't care if I use frames or not, but all the code for selecting & loading the bottom "frame" must be in separate file from those bottom frame files themselves. Does that make sense?

Thanks for taking the time to help.

JIM

[[Nicolas]]

I could try to make something like that, with or without frames. PM me for more info...

[Nile]

So - does the top need to be a frame or not..?

In the top frame you would have this:


<select onchange='self.parent.document.getElementById("bottom").src = this.value'>
<option value="http://google.com">Google</option>
<option value="http://yahoo.com">Yahoo</option>
<option value="http://dynamicdrive.com">DD</option>
</select>

Assuming the bottom has a id of bottom.
Good luck!

[jddela]

Nile,

Hi, I think I've made a lot of progress today, but I cannot figure out how to actually read data from the form fields. If you don't mind, please take a look at the attached file. I am very close (or at least I think I am).

I am more comfortable using frames, so unless that's a showstopper, I'd really like to implement it that way. Like I said, I think I'm very close to getting to work. The next technical hurdle for me will be adding previous/next arrows on the left and right sides of each dropdown menu and having clicks to those arrows update the value in the menu.

Thanks for your help!

JIM

[Nile]

Okay - first things first:


<meta http-equiv="Content-Language" content="en-us">
<meta http-equiv="Content-Type" content="text/html; charset=windows-1252">

Just leave that alone, it's setting a few things to make sure everything displays and goes through the browser right.

For


var rootpath='\\\\server\\root_dir';

Wouldn't it be forward slashes? As far as I'm concerned, the backslash is only used to call some commands in some programming languages and to access files in Windows (forward of back works)... but not for this? Correct me if I'm wrong. Or maybe your site is hosted on a windows? But I dont really know how that works...


// What I really want to do is load the page into the bottom frame!
//window.parent.frames[1].location=fullURL

To access the parents frame you do:


self.parent.document

So in your case you would do:

self.parent.document.frames[1].location=fullURL
---


alert('I hope you see something here: ' + SIMPLETEST.DROPDOWN.value);

And


<form method="POST" action="--WEBBOT-SELF--" name="SIMPLETEST">
<p>SIMPLETEST: <select size="1" name="DROPDOWN" onChange='showit()'>
<option>DEMURE</option>
<option>SASSY</option>
</select></p>
</form>

Is it not easier to just give the select an ID and use document.getElementById?


Now, just to make everything clear to me: Can you type a detailed little paragraph on what exactly you need (pretend I am dumb, but I know the concept of what you're doing - if that makes sense)

Good luck!

[jddela]

Good news! My only problem in my code was that I did not have any values assigned to my menu choices, just labels. Simply adding value="bla" to the dropdown menu options fixed my problem. I tested the loading of the bottom frame and everything.

Before:


<option selected>BLONDE</option>
<option>BRUNETTE</option>
<option>REDHEAD</option>
</select>


After:


<option value="BLONDE" selected>BLONDE</option>
<option value="BRUNETTE">BRUNETTE</option>
<option value="BRUNETTE">REDHEAD</option>
</select>


That fixed it!


The next thing I need to add are previous/next buttons to place to the left and right of each dropdown menu. When a user clicks on, say, the "PREVIOUS" button, the value in the dropdown menu will change the value immediately above it in the list. If already at the first value, then the value will change to the last value (e.g., say the drop down list contains the letters of the alphabet, in order, and the starting value is "B". If the user clicks "PREVIOUS" onces, the value will change to "A", and if he clicks it again, it will change to "Z").

So far, I only have the comments written for this function:


// When clicked, it decrements the selected item of the specified menu
// selectedlist is a dropdown menu
function decrement(selectedlist)
{

// Determine how many items are in selectedlist (so we know highest index number)
// CHANGE THE SELECTED ITEM:
// if current index is 0, then new index is max index
// else, new index is current index - 1
// set the value of menu to the value corresponding to the new index
// run buildStringandLoadFrame(), unless an onChange event is auto-generated
return true;
}

I'll see if this one gives me any trouble. I guess I need to learn how to get the number of entries in a dropdown list, and I need to learn how to change which item is selected.

JIM

[Nile]

Here, use this:


<script type="text/javascript">
var change = {
init: function(el) {
this.object = el;
},
prev: function(){
this.object.options[this.object.selectedIndex <= 0 ? this.object.options.length-1 : this.object.selectedIndex-1].selected = true;
},
next: function() {
this.object.options[this.object.selectedIndex >= this.object.options.length-1 ? 0 : this.object.selectedIndex+1].selected = true;
}
};
</script>
<input type="button" onclick="days.prev()" value="Previous" />
<select id="days">
<option>Sunday</option>
<option>Monday</option>
<option>Tuesday</option>
<option>Wednesday</option>
<option>Thursday</option>
<option>Friday</option>
<option>Saturday</option>
</select>
<script type="text/javascript">
var days = change;
days.init(document.getElementById('days'));
</script>
<input type="button" onclick="days.next()" value="Next" />

change.init(var el): Your select
change.next(): Next option
chang.prev(): Previous option


Good luck!

[Nile]

Any updates?

[jddela]

Hi,

Hey, I got everything working! I was even able to code the previous/next buttons myself, and it looks like my code is similar to what you posted.

This whole JavaScript thing is a new world for me. I'm so glad I've finally made something useful with it. Thanks for all your help!

JIM

[Nile]

No problem, I'm glad to help :D

Here on DD, we like to keep things organized. In an effort to do so, you have the option to set a thread to resolved when an issue is fixed. To make the status of the thread resolved:
1. Go to your first post
2. Edit your first post
3. Click "Go Advanced"
4. In the dropdown next to the title, select "RESOLVED"