更新2

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>

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

我无法将所有内容放在一个-tag中，因为我希望主视图的侧面板中的复选框和另一个页面中的页面上的提交按钮。（根据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

我有选项 onsubmit form ...
试试吧：

创建test.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>

包含/ action.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>

具有相同目标iframe的不同位置的多个<form>标记？

3 个答案:

更新2

更新