jQuery colorbox onclose update parent

colorbox, forms, jquery

Solution

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/

Problem

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

Original source