I have a working script that passes a value from a popup page to the parent page.
Process Flow is: ParentPage>ChildPage>ParentPage
I have had to change the process flow of my little application to have a 'category select' option on the child page. the process flow is now: ParentPage>ChildPage1>ChildPage2>ParentPage
My application now requires the user to select a value from a popup. the first popup will provide a category choice. once a category is chosen the category products are shown on the next page. the user then selects a product from the options and the value is passed to the original parent page.
I hope I have explained my problem accurately. How can I pass the selected value back to the original parent page. if my parents page is named parent.php, can I hard code the ID of page parent.php into my code:
window.opener.updateValue(parentId, value);
Any assistance is always appreciated.
My working code and proposed code is shown below:
WORKING CODE
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>
PROPOSED CODE
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>
I know popup pages are not the desired option in this situation but this is where my application is at. Please advise on how I can alter the code on child 2 to point back to the parent.php page. My thinking is to change code below
<script type="text/javascript">
function sendValue(value)
{
var parentId = <?php echo json_encode($_GET['id']); ?>;
window.opener.updateValue(parentId, value);
window.close();
}
</script>
to this code (hard code the parent ID in - what would this be for 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>
Many Thanks, Ryan
Ok, here is a summary of my architecture proposition:
main:
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)
here we go :-)