Getting a value from another frame. How?

plong · December 9th, 2003, 05:06 AM

Can someone please help me with the following?

I want to know how to get the selected value of a select box on frame1 to be displayed in a text box on frame2 as soon as the page in frame2 is loaded or refreshed.

Currently, I have a frameset with 2 frames: frame1, frame2.

frame1 has a select box (selectbox1), where a user chooses a value from the drop down list. When the value in selectbox1 is âchangedâ, the new value is passed to a text box (textbox1) in frame2.
The user can then press a button on frame2 to display some data from a database based on this value in textbox1.

My problem is that when the data is displayed in frame2, the value of textbox1 is cleared.

This is fine until the user wants to re-display the same data, or display different data, based on the selected value of selectbox1. Now, the user has to change the value of selectbox1 from what it already is and then change is back again so it puts the value back into textbox1 on frame2.

I have tried various JavaScript suggestions but I canât get them working. I am new to JavaScript so if you can humor me it would be appreciated.

Thanks

plong

Imar · December 9th, 2003, 05:37 AM

Hi there,

You can use the onload event of the body tag to execute the same code that retrieves the value from the first frame in the first place.

Something like this should work:

function GetSelectedValue()
{
  // Code here that retrieves the value from the dropdown
  // Use window.parent.frame1 to get at the other frame
  // Then set the value of the text box
}

Then you'll need to call this method in the onload of the <body> ag:

<body onload="GetSelectedValue;">

Now, whenever page 2 loads, GetSelectedValue will fire, the value from the dropdown is retrieved and displayed in the textbox.

I assumed from an earlier post you understand how to retrieve the value from the drop down list. If that's not the case, let me know and I'll show you a more verbose example.

Cheers,

Imar

---------------------------------------
Imar Spaanjaars
Everyone is unique, except for me.

plong · December 9th, 2003, 07:14 AM

Imar,

You know, I'm glad you added the final sentence to your reply because I do need to ask you for a more verbose example.

The reason being is that currently my text box doesnât retrieve the value from the select box. Instead, when the select box is changed i.e. âonchangeâ, the select box passes the selected value to a function, and the function then sets the value of the text box, as below :

   <script language="JavaScript">
   function PassText(str) {
   frames['MainBottom'].document.Dest.TEXTBOX.value = str;
   }
   // End -->
   </script>

with the function being called within the select box by :

   onChange="parent.passText(this.form.DropBox.value) "

So, I guess I need to know how to write the function that goes and gets the value of the select box rather than waiting for a value to be passed to it. The problem I think I have is knowing how to reference the select box value.

thanks in advance

plong

Imar · December 9th, 2003, 09:23 AM

Hi there,

Here's a small example that does what you want (I hope). Simply copy and paste the code to three pages (frameset.html, frame1.html and frame2.html) and run the frameset. The JavaScript I have used is quite verbose; I create intermediate variables instead of directly accessing them. This is not as optimized as it could be, but it makes it a lot easier to see what's going on.

I don't have the time right now to explain how it works in detail, so I suggest you play around with it a bit. I'll have more time tonight (roughly 7 hours from now) so if you have any questions, feel free to post theme here.

Regards and good luck,

Imar

-- frameset.html --

Code:

<html>
<head>
    <title>Frames Example</title>
</head>
<frameset cols="*,400" frameborder="NO" border="0" framespacing="0">
  <frame src="frame1.html" name="frame1">
  <frame src="frame2.html" name="frame2" scrolling="NO" noresize>
</frameset>
</html>

-- frame1.html --

Code:

<html>
<head>
    <title>Frame 1</title>
    <script language="JavaScript" type="text/javascript">
    function SetSelectedValue()
    {
        var selectedIndex = document.frmDropDown.lstTest.selectedIndex;
        var selectedValue = document.frmDropDown.lstTest[selectedIndex].value;
        window.parent.frame2.frmSubmit.txtTest.value = selectedValue;
    }
    </script>
</head>
<body>
    <h1>Frame 1</h1>
    <form name="frmDropDown">
    <select name="lstTest" onchange="SetSelectedValue();">
        <option value="Item 1">Item 1</option>
        <option value="Item 2">Item 2</option>
        <option value="Item 3">Item 3</option>
    </select>
    </form>
</body>
</html>

-- frame2.html --

Code:

<html>
<head>
    <title>Frame 2</title>
    <script language="JavaScript" type="text/javascript">
    function GetSelectedValue()
    {
        var selectedIndex = window.parent.frame1.frmDropDown.lstTest.selectedIndex
        alert("Selected Index is " + selectedIndex);
        var selectedValue = window.parent.frame1.frmDropDown.lstTest[selectedIndex].value;
        alert("Selected Value is \'" + selectedValue + "\'");
        document.frmSubmit.txtTest.value = selectedValue;
    }
    </script>
</head>
<body onLoad="GetSelectedValue();">
    <h1>Frame 2</h1>
    <form name="frmSubmit">
        <input type="text" name="txtTest">
    </form>
</body>
</html>

---------------------------------------
Imar Spaanjaars
Everyone is unique, except for me.

plong · December 10th, 2003, 04:19 AM

Thanks Imar, this is exactly what I wanted.

Also, your example has answered a few other questions I've had regarding how to reference different objects.

plong