Question

可以帮助你们。

所以我使用jQuery colorbox并通过点击链接激活它。在颜色框中有一个带有一些复选框的表单，我想要做的是在单击提交时将所选复选框的所有值都放入父级（并随后关闭颜色框）。我不希望父窗口刷新。它应该使用内容

自动填充“Colorbox中的Checkbox项目”

以下是链接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>

如果能得到一些帮助，我会非常感激。

非常感谢提前

Answer 1

您可以在ajax.html文件

中添加以下功能来执行此操作

首先在该文件中加载jQuery，然后添加此文档就绪函数

$(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;
        });             
    });

这是做什么的，当用户点击submit button overlay iframe时，它需要所有选中的复选框将这些值添加到父窗口的文本div中，然后关闭颜色框窗口。

以下是ajax.html文件

的修改代码

<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>

还要在段落中添加一个id，其中将添加值

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

您必须运行localhost或相同virtualhost的代码（如果您有）或不允许从child iframe访问父代。只需将修改后的文件放在document root的文件夹中，然后通过浏览器访问即可。如果有效，请告诉我。

这是一个有效的演示http://joynag.net/demos/colorbox/

jQuery colorbox onclose更新父级

1 个答案: