<form> 使用同一目标 iframe 位于不同位置的多个代码？

Question

我在内容区有一个iframe：

<iframe name="my_iframe" frameBorder="0" height="200" src="about:blank"></iframe>

我下面有一个提交按钮：

<form action="includes/action.php" method="post" target="my_iframe">
<input type="submit" value="Submit">
</form>

我想要另一个区域中的一些复选框：

<form action="includes/action.php" method="post" target="my_iframe">
<input type="checkbox" name="option">
</form>

但它不起作用，提交按钮有效，但不发送复选框。

我不能将所有内容都放在一个标签中，因为我希望复选框位于主视图的侧面板中，而提交按钮位于另一个页面中的页面上。（按 ajax 加载？我正在使用框架7顺便说一句。

使用不同的表单标签是不可能的还是因为 ajax 的东西？

EDIT1：我设法构建了一个示例，以便于使用 plunker 理解，它不适用于 php，我现在没有网络空间，但你明白了。

http://plnkr.co/edit/dfqzCbeQWgg9hAyCpGpb

Answer 1

更新 2

为了获得更干净的结果，而不会使用陈旧的缓存混淆测试，我已经更新了它，请查看最新更新：

http://plnkr.co/edit/34KOyh9rIEGV3bXNsD9F?p=preview

---

更新

现在我得到了一个非常完整且编码良好的演示，我已经解决了您的问题。

http://plnkr.co/edit/Z2I1Q2swIXmFfynalaLB?p=preview

注意：我使用的是测试服务器，因此缓存可能已过时。只需通过在末尾添加一个数字来更改action即可。

例

改变：

http://www.hashemian.com/tools/form-post-tester.php/so_post_chk

自：

http://www.hashemian.com/tools/form-post-tester.php/so_post_chk1

• 选中该复选框后，您的结果应cache=on

• 如果未选中该复选框，则结果应cache=

---

您可以在表单外部分配一个或多个输入（通常type="hidden"），并从页面上的任何位置收集任何数据，无论它来自哪个表单。

http://plnkr.co/edit/er5RoJ049xSBwtR7gtTI?p=preview

这个演示围绕着一个简单的JS函数：

    function toOutput(x) {
      var str = x.toString();
      var out4 = document.getElementById('out4');
      out4.value += str;
    }

请注意复选框的特殊条件：

    if(this.checked) {
      toOutput(this.value);
      text1.value += this.value;
    };

这是必需的，因为当在复选框上触发click事件时，每次单击都被视为选中和取消选中。我假设复选框值是在实际选中时收集的。

Answer 2

我在提交表单时获得了选项...
试试吧：

创建测试.php文件：

<form id="myForm" action="includes/action.php" method="post" target="my_iframe">
<input onclick="myFunction()" type="submit" value="Submit">
</form>
<form action="includes/action.php" method="post" target="my_iframe">
<input id="cbopt" type="checkbox" name="option" value="option" checked="checked">
</form>
<script>
function myFunction() {
var y = document.createElement("input");
y.setAttribute("type", "checkbox");
y.setAttribute("value", "option");
y.setAttribute("name", "option");
y.setAttribute("checked", "checked");
document.getElementById("myForm").appendChild(y);

var x = document.getElementById("cbopt").name;
document.getElementById("demo").innerHTML = x;
var z = document.forms.length;
document.getElementById("demo").innerHTML = z;
}
</script>

包含/操作的代码.php ：

<iframe name="my_iframe" frameBorder="0" height="150" width="555" src="about:blank">
<p id="demo"></p>
</iframe>
<?php 
//$site = $_POST['doorde'];
//$url = $_POST['doordie1'];
$opt = $_POST['option'];
echo  $opt;
?>

尝试评论我...

Answer 3

您可以执行以下操作，在提交之前将值从一个表单复制到另一个表单，确保在再次提交时删除之前添加的字段。

<form action="includes/action.php" method="post" target="my_iframe" id="myform">
    <input type="submit" value="Submit">
</form>
<form action="includes/action.php" method="post" target="my_iframe" id="otherform">
   <input type="checkbox" name="option">
</form>
<iframe name="my_iframe" frameBorder="0" height="200" src="about:blank"></iframe>
<script>
function copyFormFieldsIntoHiddenFields(from, to) {
    var elementsAdded = [];
    for (var i = 0; i < from.elements.length; i++) {
        var nodeToCopy = from.elements[i];
        // Unchecked checkboxes do not get sent to server
        if (nodeToCopy.type != "checkbox" || nodeToCopy.checked) {
            var hiddenField = document.createElement('input');
            hiddenField.type = "hidden";
            hiddenField.name = nodeToCopy.name;
            hiddenField.value = nodeToCopy.value;
            to.appendChild(hiddenField);
            elementsAdded.push(hiddenField);
        }
    }
    return elementsAdded;
}
var addedFields = [];
document.getElementById('myForm').addEventListener('submit', function() {
    // Remove any fields that were previously added
    for (var i = 0; i < addedFields.length; i++) {
       this.removeChild(addedFields[i]);
    }
    // Add the new hidden fields
    var copyFrom = document.getElementById('otherform');
    addedFields = copyFormFieldsIntoHiddenFields(copyFrom, this);
});
</script>