jQuery colorbox onclose update parent

Could do with some help you guys.

So I'm using jQuery colorbox and its activated by clicking a link. In the colorbox there is a form with some checkboxes, what I would like to do is to get all the values of the selected checkboxes into the parent when submit is clicked (and close colorbox subsequently). I don't want the parent window to refresh. It should automatically populate the "Checkbox Items from Colorbox" with the contents

Here is the link http://tdesigns.net84.net/colorbox/example1/

Parent code

<!DOCTYPE html>
<html>
    <head>
        <meta charset='utf-8'/>
        <title>ColorBox Examples</title>
        <style>
            body{font:12px/1.2 Verdana, sans-serif; padding:0 10px;}
            a:link, a:visited{text-decoration:none; color:#416CE5; border-bottom:1px solid #416CE5;}
            h2{font-size:13px; margin:15px 0 0 0;}
        </style>
        <link rel="stylesheet" href="colorbox.css" />
        <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js"></script>
        <script src="../colorbox/jquery.colorbox.js"></script>
        <script>
            $(document).ready(function(){
                $(".iframe").colorbox({iframe:true, width:"400px", height:"400px"});                
            });
        </script>
    </head>
    <body>
        <p><a class='iframe' href="../content/ajax.html">Outside Webpage (Iframe)</a></p>
        <p>
            Checkbox Items from Colorbox
        </p>
    </body>
</html>

popup code

<form action="" method="post">
    Choose a country 
    <br /><br />
    <input type="checkbox" name="countryCheckbox[]" value="UK" />UK<br />
    <input type="checkbox" name="countryCheckbox[]" value="USA" />USA<br />
    <input type="checkbox" name="countryCheckbox[]" value="Japan" />Japan<br />
    <input type="checkbox" name="countryCheckbox[]" value="China" />China<br />
    <input type="checkbox" name="countryCheckbox[]" value="Australia" />Australia
    <br /><br />
    <input type="submit" name="formSubmit" value="Submit" />
</form>

Would really appreciate it if I could get some help with this.

Many thanks in advance

You can do this by adding the following function in your ajax.html file

First load jQuery in that file and then add this document ready function

$(document).ready(function(){
        $('#form').submit(function(){

                    $('input:checkbox:checked').each(function(){
                        window.parent.$("#text").text(parent.$("#text").text() + $(this).val()+" ,");

                    });
                    parent.$.colorbox.close();
                    return false;
        });             
    });

What this is doing is when user clicks on the submit button on overlay iframe it takes all checked checkbox add those values into parent window's text div and then close the colorbox window.

Here's the modified code for ajax.html file

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js"></script>
<form action="" method="post" id='form'>
    Choose a country 
    <br /><br />
    <input type="checkbox" name="countryCheckbox[]" value="UK" />UK<br />
    <input type="checkbox" name="countryCheckbox[]" value="USA" />USA<br />
    <input type="checkbox" name="countryCheckbox[]" value="Japan" />Japan<br />
    <input type="checkbox" name="countryCheckbox[]" value="China" />China<br />
    <input type="checkbox" name="countryCheckbox[]" value="Australia" />Australia
    <br /><br />
    <input type="submit" name="formSubmit" value="Submit" />
</form>

<script>
    $(document).ready(function(){
        $('#form').submit(function(){

                    $('input:checkbox:checked').each(function(){
                        window.parent.$("#text").text(parent.$("#text").text() + $(this).val()+" ,");

                    });
                    parent.$.colorbox.close();
                    return false;
        });             
    });
</script>

Also add an id to the paragraph where value will be added like this

<p id="text">
    Checkbox Items from Colorbox: 
</p>

You have to run the code from localhost or same virtualhost if you have any or it will not allow accessing parent from child iframe. Just drop the modified files in a folder in your document root and access it through browser. Let me know if it works.

here's a working demo http://joynag.net/demos/colorbox/