TechQA.

javascript + PHP - send value from popup to another page

5k views Asked by At

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

php javascript parentid
Original Q&A
2

There are 2 answers

2
Sebas On BEST ANSWER

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 :-)

6
Sebas On

Just answering brutally the question, yes you can do so:

window.opener.updateValue(parentId, value);

I personnally use this system: - main window MAIN - open a popup to pick up a category POPUP - selects a value from popup, setup the category field in MAIN this way: 

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

Hope it helps!

ps: I didn't try window.opener.opener but I don't see why it wouldn't work...

edit: child2 is posted this: 

$category=$_POST[category];

You could simply open child2 like this: in child1:

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

and retrieve the value for category from child2 in javascript using window.category instead of getting it from php $category. Note that in child2.php you don't use the $category variable.

Hope it helps

instead of going through a form.

Related Questions in PHP

Related Questions in JAVASCRIPT

Related Questions in PARENTID

Popular Questions

Popular Tags

javascript python java c# php android html jquery c++ css ios sql mysql r reactjs node.js arrays c asp.net json python-3.x ruby-on-rails .net sql-server swift django angular objective-c pandas excel

Trending Questions