如何将数据从一个表单发布到另一个 iFrame 表单

Posted 2023-05-09

【中文标题】如何将数据从一个表单发布到另一个 iFrame 表单

【英文标题】：How to post data from one form to another iFrame form

【发布时间】：2016-01-31 04:22:51

【问题描述】：

我在这里要做的就是获取一个表单的表单输入并将其提交到链接到 iFrame 的另一个表单。这样做的目的是，访问者可以在 iframe 中预览他选择的汽车，如果高兴的话，可以保存一张表格并完成。

我觉得我快要接近了，但我不知道如何将数据从表格一发送到 iFrame 帖子，也找不到有关如何执行此操作的任何答案。我有一个单一的表单版本，如下所示，但无法从表单一中提取数据以提交到 iFrame

<form action="/save.php" method="post" id="save">

  <input type="text" name="firstname">
  <input type="text" name="carname">
  <input type="text" name="cartype">

  <button type="submit" name="save">Save</button>      
</form>



<form action="/preview.php"  target="iframe" method="post" id="iframebox">

  <button id="preview" type="submit" name="reload" value="post">Reload</button>   

</form>

<iframe name="iframe" src="/preview.php" ></iframe>


            $('#preview').click(function(e)
                e.preventDefault();
                var d = $("#save").serialize();
                $('#iframebox').append(d);
                $('#iframebox').submit();
            );

【参考方案1】：

这有点脏，但如果您需要在 iFrame 中执行此操作，它可以工作。您的预览框目前只是一个表单元素，您实际上是在其中附加查询字符串文本。如果您想实际将其发送到 iframe 本身，则需要解析输入并将其提交到目标 iFrame 中的预览页面。如果您知道静态命名输入将始终存在，则可以使用它们，或者如果会有您无法预测的其他输入，您可以让 JS 动态生成隐藏的输入元素。

在form.php中

<form action="save.php" method="post" id="save">

    <input type="text" name="firstname" placeholder="firstname">
    <input type="text" name="carname" placeholder="carname">
    <input type="text" name="cartype" placeholder="cartype">

    <button type="submit" name="save">
        Save
    </button>
    <button id="preview">
        Preview
    </button>
</form>

<form action="preview.php"  target="iframe" method="post" id="iframebox">
    <input type="hidden" name="firstname">
    <input type="hidden" name="carname">
    <input type="hidden" name="cartype">
</form>

<iframe name="iframe" src="preview.php" ></iframe>
<script src="https://code.jquery.com/jquery-2.1.4.min.js"></script>
<script>
    $('#preview').click(function(e) 
        e.preventDefault();
        $("#save input").each(function(index, value)
            $('#iframebox input[name="' + value.name + '"]').val(value.value);
        );
        $('#iframebox').submit();
        return false;
    );
</script>

在preview.php中

    <ul>
        <li>
            First Name : <?php echo $_POST['firstname'] ? : "N/A"; ?>
        </li>
        <li>
            Car Name : <?php echo $_POST['carname'] ? : "N/A"; ?>
        </li>
        <li>
            Car Type : <?php echo $_POST['cartype'] ? : "N/A"; ?>
        </li>
    </ul>