Home/ Questions/Q 6947967
In Process

The Archive Base Latest Questions

Editorial Team
  • 0
Asked: 2026-05-27T13:45:40+00:00

I have a page that contains a dynamically loaded <iframe> . This iframe contains

  • 0

I have a page that contains a dynamically loaded <iframe>. This iframe contains a <form>.
When the user submits the <form>, a new page is loaded within the <iframe> saying Thanks.

Instead of using a second page, i want the parent page to show the Thanks message.

So basically i am in my <iframe>, and i want to call a function on the parent frame.

How can i do that ?

Share

Leave an answer

You must login to add an answer.

Need An Account,

1 Answer

  1. Editorial Team

    I’ve done a little example for you.

    Here is the main page (index.html) containing the iframe

    <html>
    <head>
        <script type="text/javascript" src="http://code.jquery.com/jquery-1.7.1.min.js"></script>
    </head>
    <body>
        <input type="hidden" id="infoFormPosted" value=0 />
        <iframe src="./iframe.html"></iframe>
        <div id="thanks" style="display:none;">
            Thanks!
        </div>
    </body>
</html>

    And here is the iframe (iframe.html):

    <html>
    <head>
        <title>myIframe</title>
        <script type="text/javascript" src="http://code.jquery.com/jquery-1.7.1.min.js"></script>
         <script type="text/javascript">
         $(document).ready(function() {
            $("#infoForm").submit(function() {
              //change the value of the top document input hidden to 1
              $("#infoFormPosted", top.document).val(1);
            });
            // if the input hidden is set to 1
            if($("#infoFormPosted", top.document).val() == 1){
                // show the thanks div on the top document (not in the iframe)
                $("#thanks", top.document).show();
            }
        });

        </script>
    </head>
    <body>
        <div id="anydiv">
            <form id="infoForm" action="#" method="post">
              First name: <input type="text" name="fname" /><br />
              Last name: <input type="text" name="lname" /><br />
              <input type="submit" value="Submit" />
            </form> 
        </div>
    </body>
</html>

    EDIT : An alternative is to create a function inside the main page and call it in the iframe using parent.nameOfTheFunction()

    The main page (index.html)

    <html>
    <head>
        <script type="text/javascript" src="http://code.jquery.com/jquery-1.7.1.min.js"></script>
        <script type="text/javascript">
        showThanks = function(){
            $("#thanks").show();
        };

        </script>
    </head>
    <body>
        <input type="hidden" id="infoFormPosted" value=0 />
        <iframe src="./iframe.html"></iframe>
        <div id="thanks" style="display:none;">
            Thanks!
        </div>
    </body>
</html>

    The iframe (iframe.html):

    <html>
    <head>
        <title>myIframe</title>
        <script type="text/javascript" src="http://code.jquery.com/jquery-1.7.1.min.js"></script>
         <script type="text/javascript">
         $(document).ready(function() {
            $("#infoForm").submit(function() {
              //change the value of the top document input hidden to 1
              $("#infoFormPosted", top.document).val(1);
            });
            // if the input hidden is set to 1
            if($("#infoFormPosted", top.document).val() == 1){
                // call showThanks function from the main frame
                parent.showThanks(); 
            }
        });

        </script>
    </head>
    <body>
        <div id="anydiv">
            <form id="infoForm" action="#" method="post">
              First name: <input type="text" name="fname" /><br />
              Last name: <input type="text" name="lname" /><br />
              <input type="submit" value="Submit" />
            </form> 
        </div>
    </body>
</html>
    • 0