Pass variable from Iframe to parent

Hello:

I have a multiple select box inside an iframe in which I added an onchange command so that the data from the select box shows in the text box. It works fine when I keep the textbox in the iframe. However when I move the textbox back to the parent page, it of course does not work.
How do I edit the script below to pass the variable from the iframe to the parent page.

onchange="UpdateFromList (this, this.form.ListSelected);"
LVL 1
RecipeDanAsked:
Who is Participating?
 
b0lsc0ttConnect With a Mentor IT ManagerCommented:
RecipeDan,

Are the pages both on the same server and domain?  Same protocol too (i.e. neither https)?

You need to pass it to something more specific than just the parent page.  However if it is the input on that page then use ...

onchange="top.document.formName.inputName.value = this.value;"

That should at least let you know how to "communicate" with the parent page.  If you want to call a function on the page or send the value somewhere else then you just need to modify the script a bit.  If you need help with details then please elaborate on the html for the pages and elements.

Let me know if you have any questions or need more information.

b0lsc0tt
0
 
b0lsc0ttIT ManagerCommented:
RecipeDan,

By the way ... if the pages are on different domains/servers or the protocols are mixed then the script won't work.  The browser will stop this because it considers it a security issue (cross domain scripting).

Let me know if you have a question.

b0lsc0tt
0
 
amosvanhornCommented:
Here's a snippet of code that I used to communicate from an iFrame to some code in the Parent page:



// code in iFrame:
 function notifyParentOfChange()
        {
            try
            {
                var thisIFrameName= window.name;
                window.parent.textValueChanged(thisIFrameName, GetTextFromInput());
            }
            catch(e)
            {
                // do nothing if the method does not exist in parent
            }
        }

function GetTextFromInput()
        {
            return document.getElementById("textBox1").value;
        }
//********************************//

Code in Parent:

function textValueChanged(iframeName, newText)
{
    alert("The iFrame " + iframeName + " says the new text value is: " + newText);
}
0
 
shiraztiCommented:
A simple example, sometimes may helpful to you. ( update() function should be on the iframe page)

      function update() {
            parent.document.formname.textbox.value = 'New Text';
      }
0
 
b0lsc0ttIT ManagerCommented:
I'm glad I could help.  Thanks for the grade, the points and the fun question.

bol
0
All Courses

From novice to tech pro — start learning today.