Wrox Programmer Forums

Need to download code?

View our list of code downloads.

Go Back   Wrox Programmer Forums > Web Programming > JavaScript > Javascript How-To
Password Reminder
Register
Register | FAQ | Members List | Calendar | Search | Today's Posts | Mark Forums Read
Javascript How-To Ask your "How do I do this with Javascript?" questions here.
Welcome to the p2p.wrox.com Forums.

You are currently viewing the Javascript How-To section of the Wrox Programmer to Programmer discussions. This is a community of tens of thousands of software programmers and website developers including Wrox book authors and readers. As a guest, you can read any forum posting. By joining today you can post your own programming questions, respond to other developers’ questions, and eliminate the ads that are displayed to guests. Registration is fast, simple and absolutely free .
DRM-free e-books 300x50
Reply
 
Thread Tools Search this Thread Display Modes
  #1 (permalink)  
Old December 9th, 2003, 05:06 AM
Registered User
 
Join Date: Nov 2003
Location: , , .
Posts: 6
Thanks: 0
Thanked 0 Times in 0 Posts
Default Getting a value from another frame. How?

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


Reply With Quote
  #2 (permalink)  
Old December 9th, 2003, 05:37 AM
Imar's Avatar
Wrox Author
Points: 72,038, Level: 100
Points: 72,038, Level: 100 Points: 72,038, Level: 100 Points: 72,038, Level: 100
Activity: 100%
Activity: 100% Activity: 100% Activity: 100%
 
Join Date: Jun 2003
Location: Utrecht, Netherlands.
Posts: 17,080
Thanks: 80
Thanked 1,587 Times in 1,563 Posts
Default

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.
Reply With Quote
  #3 (permalink)  
Old December 9th, 2003, 07:14 AM
Registered User
 
Join Date: Nov 2003
Location: , , .
Posts: 6
Thanks: 0
Thanked 0 Times in 0 Posts
Default

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


Reply With Quote
  #4 (permalink)  
Old December 9th, 2003, 09:23 AM
Imar's Avatar
Wrox Author
Points: 72,038, Level: 100
Points: 72,038, Level: 100 Points: 72,038, Level: 100 Points: 72,038, Level: 100
Activity: 100%
Activity: 100% Activity: 100% Activity: 100%
 
Join Date: Jun 2003
Location: Utrecht, Netherlands.
Posts: 17,080
Thanks: 80
Thanked 1,587 Times in 1,563 Posts
Default

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.
Reply With Quote
  #5 (permalink)  
Old December 10th, 2003, 04:19 AM
Registered User
 
Join Date: Nov 2003
Location: , , .
Posts: 6
Thanks: 0
Thanked 0 Times in 0 Posts
Default

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

Reply With Quote
Reply


Thread Tools Search this Thread
Search this Thread:

Advanced Search
Display Modes

Posting Rules
You may not post new threads
You may not post replies
You may not post attachments
You may not edit your posts

BB code is On
Smilies are On
[IMG] code is Off
HTML code is Off
Trackbacks are Off
Pingbacks are On
Refbacks are Off


Similar Threads
Thread Thread Starter Forum Replies Last Post
How to set one frame src from other frame akumarp2p ASP.NET 1.x and 2.0 Application Design 2 March 13th, 2007 04:13 AM
DIV - FRAME seph321 Classic ASP Basics 2 December 6th, 2006 12:10 PM
parsing form data from frame to other frame audio-catalyst Classic ASP Basics 5 January 3rd, 2006 02:57 PM
Call right frame Page_Load event from left frame. ochanarachel Classic ASP Basics 0 January 28th, 2005 05:13 AM
Refresh a frame from another frame czambran Javascript 3 October 21st, 2004 11:20 AM



All times are GMT -4. The time now is 05:50 PM.


Powered by vBulletin®
Copyright ©2000 - 2019, Jelsoft Enterprises Ltd.
© 2013 John Wiley & Sons, Inc.