Pass array from child window to parent window

Hi,

My scenario is like this.

  1. Click on button and pop up child window.
  2. Select multiple checkbox and submit array which send back to parent window and value store in a hidden variable.

i manage to do pop up child window, pass textfield value to parent window. But it cant send php array to parent window. Please help. I’m not good in js. Thank you.

Regards,
chunket

Parent


<script language=Javascript>
<html>
<body>
<?php
$AreaCheckBox = $_REQUEST[AreaCheckBox];
print_r($AreaCheckBox);
?>

function popupArea()
{
   var w = document.form1.State.selectedIndex;
   var selected_text = document.form1.State.options[w].text;
   var selected_value = document.form1.State.options[w].value;
   window.open("pop-area.php?StateId="+selected_value+"&State="+selected_text+"",'','scrollbars=1,width=600,height=650');
}
</script>

<?php echo "<A HREF='#' onclick=\\"popupArea();\\">Advanced</A>"; ?>

<form id="form1" name="form1" method="post" action="">
<input type="hidden" name="AreaCheckBox" id="AreaCheckBox" />
<input type="submit" name="Submit" id="Submit" value="Search" />
</form>
</body>
</html>

Child


<?php
session_start();
include "../config.php";

$StateId = $_REQUEST['StateId'];
$State = $_REQUEST['State'];

//get detail for display
$sql = "SELECT ID,NAME FROM AREA WHERE STATE_ID='$StateId'";
$rs = mysql_query($sql);
$num = mysql_num_rows($rs);
?>
<html>
<body>

<script type="text/javascript">
function SendInfo(){
var txtVal = document.formPop.AreaCheckBox.value;
window.opener.document.form1.AreaCheckBox.value=txtVal;

window.close();
}
</script>


<table class="img-border" align="center" border="0" cellpadding="1" cellspacing="1" width="550">
  <tbody>
    <tr bgcolor="#fff5ea">
      <td height="25" colspan="3" align="center" class="featured-black-heading"><strong>State: <?php echo $State; ?></strong></td>
    </tr>
<form name="formPop">
    <?php
	for($i=0; $i<$num; $i++){
		$row = mysql_fetch_array($rs);
		
		echo "<tr bgcolor=\\"#fff5ea\\">
		  <td align=\\"center\\">";
		  echo $i+1;
		  echo "</td>
		  <td align=\\"center\\">$row[NAME]</td>
		  <td align=\\"center\\"><input name='AreaCheckBox[]' type='checkbox' value='$row[ID]'></td>
		</tr>";
	}
	?>
    <tr>
    <td align="center" colspan="3">
    <input name="Submit" type="submit" value="OK" onclick="SendInfo();">
    <input type="button" value="Close" onClick="window.close()">
    <input name="State" type="hidden" value="<?php echo $StateId; ?>">
      <label></label></td>
    </tr>
	</form>
  </tbody>
</table>
<br />
</body>
</html>

Do you want to send a PHP Array to the parent window?

Or is it a Javascript array that you want to sent to the parent window?

If you’re sending a PHP array, it has to first get to the child window over HTTP. HTTP is text based, so you have to convert the array to text (serialize it).

On the child, you can unserialize the string representation of the array sent from PHP.

The simplest is probably to convert the array into a JSON string. PHP5 has native support for this:

eg:

<?php

$str = json_encode($myArray);

echo '<input type="hidden" name="myarray" value="'.addslashes($myArray).'" />';

?>

In your javascript you can use http://www.json.org/js.html

Hi,

Thanks for reply.
All I want is to pass the form’s checkbox value in the child window back to parent window. Can we done this using POST method to send the value to parent window? I think i can understand better in php array.

I have try the above code which use javascript to send single textfield’s value to parent window only. I just don’t know how to pass the form’s checkbox array (multiple selection).

I have a workaround, which is on submit in child window, i stored the value in session and close window. When parent window finish enter all other form selection, then POST to process, and i get the child window’s value from session.

Thanks anyway, I will study json and if you have better answer please let me know. :slight_smile:

What you want is just client side, so no need for session or other stuff. You can pass any data type between two browser windows that have a reference to each other (In fact even without references but thats off topic).

Probably the easiest thing to do is to create a global function in the parent, that the child will invoke.

eg:

window.receiveFromChild = function(obj) {
// do stuff to the obj
};

Then in the child, when you want to pass something, just send it to:

window.opener.receiveFromChild ( obj );

For example, the checkbox values would be something like:

var inputs = document.formPop.getElementsByTagName('input');
var checked = [];
for (var i = 0; i < inputs.length; i++) {
  if (inputs[i].type == 'checkbox' && inputs[i].checked) {
    checked.push(inputs[i].value);
  }
}
window.opener.receiveFromChild ( checked );

It isn’t tested but should give an idea…