javascript + PHP - 将值从弹出窗口发送到另一个页面答案

【问题标题】：javascript + PHP - send value from popup to another pagejavascript + PHP - 将值从弹出窗口发送到另一个页面
【发布时间】：2012-06-02 09:03:42
【问题描述】：

我有一个工作脚本可以将值从弹出页面传递到父页面。

流程是：父页面>子页面>父页面

我不得不更改我的小应用程序的流程，以便在子页面上有一个“类别选择”选项。现在的流程是： ParentPage>ChildPage1>ChildPage2>ParentPage

我的应用程序现在要求用户从弹出窗口中选择一个值。第一个弹出窗口将提供类别选择。选择类别后，类别产品将显示在下一页上。然后用户从选项中选择一个产品，并将值传递给原始父页面。

我希望我已经准确地解释了我的问题。如何将所选值传递回原始父页面。如果我的父母页面名为 parent.php，我可以将页面 parent.php 的 ID 硬编码到我的代码中吗：

window.opener.updateValue(parentId, value);

我们总是感谢任何帮助。

我的工作代码和建议的代码如下所示：

工作代码

parent.php

<html>
<head>
<title>test</title>

<script type="text/javascript">  
function selectValue(id) 
{ 
    // open popup window and pass field id 
    window.open('child.php?id=' + encodeURIComponent(id),'popuppage', 
      'width=400,toolbar=1,resizable=1,scrollbars=yes,height=400,top=100,left=100'); 
} 

function updateValue(id, value) 
{ 
    // this gets called from the popup window and updates the field with a new value 
    document.getElementById(id).value = value; 
} 

</script> 
</head>

<body>

<table> 

<tr>
<th>PACK CODE</th>
</tr>

<tr>  
    <td>
        <input size=10  type=number id=sku1 name=sku1 ><img src=q.png  name="choice" onClick="selectValue('sku1')" value="?">
    </td>
</tr>
<tr> 
    <td>
        <input size=10  type=number id=sku2 name=sku2 ><img src=q.png  name="choice" onClick="selectValue('sku2')" value="?">
    </td>
</tr>
</table>


</body>
</html>

child.php

<script type="text/javascript"> 
function sendValue(value) 
{ 
    var parentId = <?php echo json_encode($_GET['id']); ?>; 
    window.opener.updateValue(parentId, value); 
    window.close(); 
} 
</script> 
<table> 
    <tr> 
        <th>Pack Code</th>                       
    </tr> 
    <tr> 
        <td>1111</td> 
        <td><input type=button value="Select" onClick="sendValue('1111')" /></td>
    </tr>
    <tr> 
        <td>2222</td> 
        <td><input type=button value="Select" onClick="sendValue('2222')" /></td>
    </tr>
    <tr> 
        <td>3333</td> 
        <td><input type=button value="Select" onClick="sendValue('3333')" /></td>
    </tr>
</table>

提议的代码

parent.php

<html>
<head>
<title>test</title>

<script type="text/javascript">  
function selectValue(id) 
{ 
    // open popup window and pass field id 
    window.open('child1.php?id=' + encodeURIComponent(id),'popuppage', 
      'width=400,toolbar=1,resizable=1,scrollbars=yes,height=400,top=100,left=100'); 
} 

function updateValue(id, value) 
{ 
    // this gets called from the popup window and updates the field with a new value 
    document.getElementById(id).value = value; 
} 

</script> 
</head>

<body>

<table> 

<tr>
<th>PACK CODE</th>
</tr>

<tr>  
    <td>
        <input size=10  type=number id=sku1 name=sku1 ><img src=q.png  name="choice" onClick="selectValue('sku1')" value="?">
    </td>
</tr>
<tr> 
    <td>
        <input size=10  type=number id=sku2 name=sku2 ><img src=q.png  name="choice" onClick="selectValue('sku2')" value="?">
    </td>
</tr>

</table>

</body>
</html>

child1.php

<script type="text/javascript"> 
function sendValue(value) 
{ 
    var parentId = <?php echo json_encode($_GET['id']); ?>; 
    window.opener.updateValue(parentId, value); 
    window.close(); 
} 
</script> 
 <form name="category" method="POST" action=child2.php>
<table> 
<tr> 
<td>Category</td>
</tr> 
<tr> 
<td>
<select name="category" id="category">
   <option value="1">1</option>
   <option value="2">2</option>
   <option value="3">3</option>
   <option value="4">4</option>
 </select> 
</td>  
</tr> 
<tr>
<td>
<input type=submit value=next>
</td>
</tr>
</table>

Child2.php

<script type="text/javascript"> 
function sendValue(value) 
{ 
    var parentId = <?php echo json_encode($_GET['id']); ?>; 
    window.opener.updateValue(parentId, value); 
    window.close(); 
} 
</script> 


<?

$category=$_POST[category];

?>
 <form name="selectform"> 
 <table>
    <tr> 
    <tr> 
        <th>Pack Codes for Category <? echo $category; ?></th>                       
    </tr> 
    <tr> 
        <td>1111</td> 
        <td><input type=button value="Select" onClick="sendValue('1111')" /></td>
    </tr>
    <tr> 
        <td>2222</td> 
        <td><input type=button value="Select" onClick="sendValue('2222')" /></td>
    </tr>
    <tr> 
        <td>3333</td> 
        <td><input type=button value="Select" onClick="sendValue('3333')" /></td>
    </tr>
    </table>

我知道在这种情况下弹出页面不是所需的选项，但这是我的应用程序所在的位置。请告知我如何更改子 2 上的代码以指向 parent.php 页面。我的想法是更改下面的代码

<script type="text/javascript"> 
function sendValue(value) 
{ 
    var parentId = <?php echo json_encode($_GET['id']); ?>; 
    window.opener.updateValue(parentId, value); 
    window.close(); 
} 
</script>

到此代码（将父 ID 硬编码到 parent.php 中）

<script type="text/javascript"> 
function sendValue(value) 
{ 
    var parentId = <?php echo json_encode($_GET['id']); ?>; 
    window.opener.updateValue('parent.php', value); 
    window.close(); 
} 
</script>

非常感谢，瑞恩

【问题讨论】：

标签： php javascript parentid

【解决方案1】：

好的，这是我的架构主张的总结：

主要：

var oChild = window.popup('child1.php');
oChild.openerr = window;

child1.php：

var oWin = window.popup('child2.php');
oWin.category = document.getElementById('category').value;
oWin.openerr = window;
//here use window.openerr to access the parent (main)

child2.php：

var g_oXhr = new xmlHttpRequest();
    g_oXhr.onreadystatechange = function() {
        if (g_oXhr.readyState == 4 && (g_oXhr.status == 200)) {
            //use g_oXhr.responseText or g_oXhr.responseXML
        }
    }

    g_oXhr.open("POST", "mysql_query_elements_category.php", true);
    g_oXhr.setRequestHeader("Content-type", "application/x-www-form-urlencoded; charset=utf-8");
    g_oXhr.send('0=' + encodeURIComponent(window.category));

    //here use window.openerr to access the parent (child1)

我们开始:-)

【讨论】：

是否可以从子窗口返回到父窗口，如果可以，我该怎么做
编辑示例以增加返回父级的可能性

【解决方案2】：

只是粗暴地回答这个问题，是的，你可以这样做：

window.opener.updateValue(parentId, value);

我个人使用这个系统： - 主窗口 MAIN - 打开一个弹出窗口以选择一个类别 POPUP - 从弹出窗口中选择一个值，以这种方式在 MAIN 中设置类别字段：

var oElem = window.opener.document.getElementById("myElementId");
oElem.value = '...';

希望对你有帮助！

ps：我没有尝试window.opener.opener，但我不明白为什么它不起作用...

编辑： child2 是这样发布的：

$category=$_POST[category];

您可以像这样简单地打开 child2：在 child1 中：

wherever.onclick = function(e) {
var ochild2 = window.open('child2.php');
ochild2.category = document.getElementById('category').value;
}

并使用 window.category 从 javascript 中的 child2 检索类别的值，而不是从 php $category 获取它。请注意，在 child2.php 中您不使用 $category 变量。

希望对你有帮助

而不是通过表单。

【讨论】：

您好，感谢您的及时回复。我对此很陌生，所以仍在加快速度。 parentId 应该是什么？父.php？或者我如何将您的代码建议代码合并到我现有的页面中。谢谢，R
我明白了，问题是 child2 不是弹出窗口...我想读你但检查你的代码我知道你通过表单验证目标进入该页面。在这种情况下，您丢失了 window.opener 链...
100% 正确。所以现在需要指定父页面而不是依赖 window.opener.updateValue(parentId, value);可以这样做吗？谢谢，R
谢谢塞巴斯。我将在 mysql 查询中使用该变量。我只是想简化问题。然后我如何在孩子 1 上使用类别选择，并将其传递给孩子 2 以在查询中使用？可以这样做吗？谢谢你的帮助，我知道我在问你。谢谢，R
没问题！你肯定能做到，欢迎来到异步世界：D 当你收到 window.category 值时，在 javascript 中，在 child2 中，只需发送一个带有这个值的 AJAX 查询到一个 php，它将返回所需类别的元素，up然后给你在 child2 中使用这个 return :)