表单提交到另一个文件中的iframe

时间:2015-07-10 05:14:05

标签: javascript php jquery html iframe

如标题所述,我想提交一份表格,结果会显示在另一个档案的iFrame中。

的file1.html

<form action="login.php" target="target_iframe">
   <input type="text" id="login_id" />
   <input type="text" id="login_ps" />
   <input type="submit" id="login_btn" value="Login" />
</form>

file2.html

<iframe src="login.php" name="target_iframe"></iframe>

请注意,文件“login.php”是来自第三方的另一个文件,这就是我想将它们嵌入iframe的原因。

P.S。整个想法是提交登录信息,并确保结果在另一个页面仍然具有我自己的页眉和页脚。这就是为什么我提出将结果页面嵌入iframe的想法。但是,我对此非常开放,并欢迎其他解决方案。非常感谢你。

1 个答案:

答案 0 :(得分:0)

改变这个:

<form action="login.php" target="target_iframe">
   <input type="text" id="login_id" />
   <input type="text" id="login_ps" />
   <input type="submit" id="login_btn" value="Login" />
</form>

到此(f1.html):

<form method="GET" action="login.php" target="target_iframe">
   <input type="text" id="login_id" name="login_id"/>
   <input type="text" id="login_ps" name="login_ps" />
   <input type="submit" id="login_btn" value="Login" />
</form>

问题是您忘记将name属性添加到表单输入中。只有表单中具有name属性的输入才会提交

我的测试php文件, login.php

<?php
    var_dump($_REQUEST);
?>

<强> f1.html:

<html>
    <body>
    <form method="GET" action="f2.php">
        <input type="text" id="login_id" name="login_id"/>
        <input type="text" id="login_ps" name="login_ps" />
        <input type="submit" id="login_btn" value="Login" />
    </form>
    </body>
</html>

<强> f1.php:

<?php 
    if (isset($_GET["login_id"]) && isset($_GET["login_ps"])){
?>
        <script src="http://code.jquery.com/jquery-latest.min.js"></script>
        <form id="myform" action="login.php" target="target_iframe" method="get">
            <input type="hidden" name="login_id" value="<?= $_GET['login_id'] ?>">
            <input type="hidden" name="login_ps" value="<?= $_GET['login_ps'] ?>">
        </form>

        <script type="text/javascript">
            $(function(){
                $("#myform").submit();
        });
        </script>
    <?php }?>
<html>
    <body>
        <iframe id="target_iframe" name="target_iframe" width="500" height="500" ></iframe>
    </body>
</html>