passing hidden field to iframe hidden field and displaying on label

Hi experts,

I'm using JavaScript in an html page to work with an iframe.

I created 2 examples.

Sample1 works fine.
Sample 2 is the one I have an undefined error on and i'm trying to fix.

Sample 1

Below is my code for Sample 1.
In sample 1, on the main page i have a hidden field called HiddenField1 with a value of "Pear".
With JavaScript function, on page load, I get the value of the hidden field and send it to the Iframe.
Then in the content page, i have another hidden field called SubreportHiddenField1 which gets the value I passed in.

When I run Sample 1, if I use google chrome to inspect the content, i see that the hidden field value from the main page did get passed to the hidden field in the iframe on page load like I wanted.

Run.PNG

Sample1_MainPage.html

<!DOCTYPE html>
<html>
<head>
    <title>Main Page</title>
    <style type="text/css">
        body {
            padding: 30px;
            font-family: Arial;
        }

        #Iframe1 {
            width: 400px;
            height: 150px;
            border: 5px dotted #0000ff;
        }

    </style>
    <script type="text/javascript">

        //https://www.experts-exchange.com/questions/25007454/iframes-passing-a-value-from-a-parent-to-its-child-iframe.html

        function SendData() {

            // javascript - get value of hidden field and store in variable
            var fruitparam1 = document.getElementById('HiddenField1').value;

            // send the variable to the input called SubreportHiddenField1 in the form called FruitForm in the frame called Iframe1
            window.Iframe1.FruitForm.SubreportHiddenField1.value = fruitparam1;
        }
        // on page load run this javascript function
        window.onload = SendData;
    </script> 
</head>
<body>
    <input type="hidden" id="HiddenField1" name="HiddenField1" value="Pear">

    <iframe src="Sample1_ContentPage.html" id="Iframe1" name="Iframe1"></iframe>

</body>
</html>

Open in new window


Sample1_ContentPage.html

<!DOCTYPE html>
<html>
<head>
	<title>Content Page</title>

    <style type="text/css">
        body {
            padding: 30px;
            font-family: Arial;
        }

   </style>

</head>
<body>

    <form name="FruitForm">
        <input type="hidden" id="SubreportHiddenField1" name="SubreportHiddenField1">
    </form>

<!--    <form name="FruitForm" action="http://mysite.com/" method="post">
        <input type="hidden" id="SubreportHiddenField1" name="SubreportHiddenField1">
    </form>-->
</body>
</html>

Open in new window


Sample 2

Sample 2 is a copy of Sample 1 but now I'm trying to display the value of the hidden field that got passed in to the hidden field called id="SubreportHiddenField1" on  the page on page load.
The issue is that on the content page in my GetFruit function on this line of code

            // javascript - get value of hidden field and store in variable
            var getSubreportHiddenField1 = parent.document.getElementById('SubreportHiddenField1').value;

I'm getting this error when I inspect with google chrome:

error
I think the issue is that I need to wait for the iframe to load completely before i try to get it's value and then display it on the div called id="DivSubreportHiddenField1".
Not sure how to do that.

Sample2_MainPage.html

<!DOCTYPE html>
<html>
<head>
    <title>Main Page</title>
    <style type="text/css">
        body {
            padding: 30px;
            font-family: Arial;
        }

        #Iframe1 {
            width: 400px;
            height: 150px;
            border: 5px dotted #0000ff;
        }

    </style>
    <script type="text/javascript">

        //https://www.experts-exchange.com/questions/25007454/iframes-passing-a-value-from-a-parent-to-its-child-iframe.html

        function SendData() {

            // javascript - get value of hidden field and store in variable
            var fruitparam1 = document.getElementById('HiddenField1').value;

            // send the variable to the input called SubreportHiddenField1 in the form called FruitForm in the frame called Iframe1
            window.Iframe1.FruitForm.SubreportHiddenField1.value = fruitparam1;
        }
        // on page load run this javascript function
        window.onload = SendData;
    </script> 
</head>
<body>
    <input type="hidden" id="HiddenField1" name="HiddenField1" value="Pear">

    <iframe src="Sample2_ContentPage.html" id="Iframe1" name="Iframe1"></iframe>

</body>
</html>

Open in new window


Sample2_ContentPage.html

<!DOCTYPE html>
<html>
<head>
	<title>Content Page</title>

    <style type="text/css">
        body {
            padding: 30px;
            font-family: Arial;
        }
   </style>



    <script type="text/javascript">

        function GetFruit() {

            //alert("JavaScript - Hello!");

            // javascript - get value of hidden field and store in variable
            var getSubreportHiddenField1 = parent.document.getElementById('SubreportHiddenField1').value;

            //alert(getSubreportHiddenField1);

            // display the value stored in variable inside Div with ID of DivSubreportHiddenField1
            document.getElementById("DivSubreportHiddenField1").innerHTML = getSubreportHiddenField1

        }
        // on page load run this javascript function
        window.onload = GetFruit;

        //https://stackoverflow.com/questions/6258863/iframe-dom-problem-undefined-values-when-accessing-form-field

    </script>

</head>
<body>

    <form name="FruitForm">
        <input type="hidden" id="SubreportHiddenField1" name="SubreportHiddenField1">
        <div id="DivSubreportHiddenField1"></div>
    </form>

<!--    <form name="FruitForm" action="http://mysite.com/" method="post">
        <input type="hidden" id="SubreportHiddenField1" name="SubreportHiddenField1">
    </form>-->


</body>
</html>

Open in new window


Any ideas of how to fix Sample 2?
Any ideas of how to fix it to display the value of this hidden field id="SubreportHiddenField1" on page load after the ifram has finished loading ?
LVL 1
maqskywalkerAsked:
Who is Participating?

[Product update] Infrastructure Analysis Tool is now available with Business Accounts.Learn More

x
I wear a lot of hats...

"The solutions and answers provided on Experts Exchange have been extremely helpful to me over the last few years. I wear a lot of hats - Developer, Database Administrator, Help Desk, etc., so I know a lot of things but not a lot about one thing. Experts Exchange gives me answers from people who do know a lot about one thing, in a easy to use platform." -Todd S.

Julian HansenCommented:
The iframe in the second sample has this
var getSubreportHiddenField1 = parent.document.getElementById('SubreportHiddenField1').value;

Open in new window

The hidden field in the parent is defined like this
<input type="hidden" id="HiddenField1" name="HiddenField1" value="Pear">

Open in new window

You are getting confused between the name of the hidden field in the iframe (which IS SubreportHiddenField1) and the hidden field in the parent (which is HiddenField1)
0
maqskywalkerAuthor Commented:
That was a typo, I meant to have this line:

var getSubreportHiddenField1 = document.getElementById('SubreportHiddenField1').value;

But when I run it, the value is empty. That variable is just empty.
p1.PNG
But if i set that variable to a string value then this value shows on the div in my iframe.
//var getSubreportHiddenField1 = "Pineapple";
0
Julian HansenCommented:
Refer my sample which uses your code exactly

http://www.marcorpsa.com/ee/t3029.html
0

Experts Exchange Solution brought to you by

Your issues matter to us.

Facing a tech roadblock? Get the help and guidance you need from experienced professionals who care. Ask your question anytime, anywhere, with no hassle.

Start your 7-day free trial
maqskywalkerAuthor Commented:
thanks. nice.
0
Julian HansenCommented:
You are welcome.
0
It's more than this solution.Get answers and train to solve all your tech problems - anytime, anywhere.Try it for free Edge Out The Competitionfor your dream job with proven skills and certifications.Get started today Stand Outas the employee with proven skills.Start learning today for free Move Your Career Forwardwith certification training in the latest technologies.Start your trial today
JavaScript

From novice to tech pro — start learning today.