PHP inserting into parent window text area from child window radio button

Palastia · August 24, 2012

Hi everyone, Im a newbie in javascript and php and would like to know if it is possible to insert into parent window textarea from child window using radio button's value in child window. I would greatly appreciate it if someone could assist me on this. Thanks.

Adam · August 24, 2012

Provided you're not breaking the Same Origin Policy, then it's no problem. The window object stores a reference to the parent in window.opener. Remember that any "global" variable or function is actually just stored within the window in JavaScript, so window.opener is essentially the path to the "global" scope of the parent.

Palastia · August 24, 2012

At the moment it appears I am having problems trying to determine which radio button is selected in the child window and then actually passing its value into the parent window. :confused:

Adam · August 24, 2012

Can you show us some code?

Palastia · August 24, 2012

So basically what im trying to do is that retrievemath.php (child window) will be populated with data from database into a html table. For each record there is a radio button that the user can select to insert the value of the selected radio button into a ckeditor text area in test.php (main window). Please forgive me for posting such large chunks of code as I am unable to identify the key problem area since I am a newbie to php and javascript. Thanks.

Parent Window "test.php":

<head>
<script type='text/javascript'>
window.onload = function()
{
  document.getElementById('b1').onclick = openChild;
}
function openChild()
{
  this.disabled = false;
  xWinOpen('retrievemath.php');
}
var xChildWindow = null;
function xWinOpen(sUrl)
{
  // Modify 'features' to suit your needs:
  var features = "left=100,top=100,width=400,height=400,location=0,menubar=0," +
    "resizable=1,scrollbars=1,status=0,toolbar=0";
  if (xChildWindow && !xChildWindow.closed) {xChildWindow.location.href  = sUrl;}
  else {xChildWindow = window.open(sUrl, "myWinName", features);}
  xChildWindow.focus();
  return false;
}
</script>
<script src="ckeditor/ckeditor.js"></script>

</head>
<body>
    <form>
    <textarea class="ckeditor" cols="80" id="editor1" name="editor1" rows="10" ></textarea>

<input type="button" id ="b1" onClick="myPopup2()" value="Insert math">

<p onClick="myPopup2()">Insert</p>

</body>

Child Window "retrievemath.php":

<?php
include ('database_connection.php');
  $dbConn = mysql_connect('localhost', 'root', '')
             or trigger_error(mysql_error(), E_USER_ERROR);
  // select the database for use
  mysql_select_db('test', $dbConn);
$query_retrieve_expression = "SELECT * FROM math";
$queryResource = mysql_query($query_retrieve_expression, $dbConn) or die(mysql_error());
?>

<head>
<style type="text/css">
table.hovertable {
font-family: verdana,arial,sans-serif;
font-size:11px;
color:#333333;
border-width: 1px;
border-color: #999999;
border-collapse: collapse;
}
table.hovertable th {
background-color:#c3dde0;
border-width: 1px;
padding: 8px;
border-style: solid;
border-color: #a9c6c9;
}
table.hovertable tr {
background-color:#d4e3e5;
}
table.hovertable td {
border-width: 1px;
padding: 8px;
border-style: solid;
border-color: #a9c6c9;
}
</style>

<script type='text/javascript'>
window.onload = function()
{
  document.getElementById('f1').onsubmit = sendToParent;
}
function sendToParent()
{
  if (window.opener) {
    var cta = document.getElementById('<?php echo $row['mathID']?>');
    var pta = window.opener.document.getElementById('editor1');
    pta.value = cta.value;
    self.close();
  }
  return false;
}
</script>
</head>
<body>
        <form id="f1">
<table class="hovertable">
<tr>
    <th>Insert ?</th><th>Expression Name</th><th>Math Expression</th>
</tr>
    <?php
               while($row = mysql_fetch_assoc($queryResource))
               {     
    ?>
                  
                    <tr> 
                    <td><input type="radio" name="insert" id="<?php echo $row['mathID']?>" value="<?php echo $row['expressionname']?>" /> </td> 
                    <td><?php echo $row['expressionname']; ?></td>
                    <td><?php echo $row['mathexpression']; ?></td> 
                    </tr>
                    
    <?php
               }           
    ?>


</table>
      <input type="button" value="Insert" onclick="sendToParent();" />       
        </form>
</body>

Palastia · August 24, 2012

Update: I have figured out something wrong with my earlier code and changed the sendToParent function. But it still does not work.

Child Window "retrievemath.php":

<?php
include ('database_connection.php');
  $dbConn = mysql_connect('localhost', 'root', '')
             or trigger_error(mysql_error(), E_USER_ERROR);
  // select the database for use
  mysql_select_db('test', $dbConn);
$query_retrieve_expression = "SELECT * FROM math";
$queryResource = mysql_query($query_retrieve_expression, $dbConn) or die(mysql_error());
?>

<head>

<style type="text/css">
table.hovertable {
font-family: verdana,arial,sans-serif;
font-size:11px;
color:#333333;
border-width: 1px;
border-color: #999999;
border-collapse: collapse;
}
table.hovertable th {
background-color:#c3dde0;
border-width: 1px;
padding: 8px;
border-style: solid;
border-color: #a9c6c9;
}
table.hovertable tr {
background-color:#d4e3e5;
}
table.hovertable td {
border-width: 1px;
padding: 8px;
border-style: solid;
border-color: #a9c6c9;
}
</style>

<script type='text/javascript'>
window.onload = function()
{
  document.getElementById('f1').onsubmit = sendToParent;
}
function sendToParent()
{
    var cta='';

    var radio=document.getElementsByName("insert");

    for(var i=0;i<radio.length;i++)
    {
        cta+=radio[i].value;
    }

    var pta = opener.document.parent_window_formname.editor1('editor1');
    pta.value = cta;
    self.close();
}

</script>
</head>
<body>
        <form id="f1">
<table class="hovertable">
<tr>
    <th>Insert ?</th><th>Expression Name</th><th>Math Expression</th>
</tr>
    <?php
               while($row = mysql_fetch_assoc($queryResource))
               {     
            
    ?>
                  
                    <tr> 
                    <td><input type="radio" name="insert" id="<?php echo $row['mathID']?>" value="<?php echo $row['expressionname']?>" /> </td> 
                    <td><?php echo $row['expressionname']; ?></td>
                    <td><?php echo $row['mathexpression']; ?></td> 
                    </tr>
                    
    <?php
               }           
    ?>


</table>
      <input type="button" value="Insert" onclick="sendToParent();" />
      
        </form>
</body>

Adam · August 24, 2012

var pta = opener.document.parent_window_formname.editor1('editor1');

You haven't named the parent form, and I'm not sure what you're trying to access in the parentheses? I can't remember off the top of my head, but I think you can just get the value property of the a radio. I'll have a look..

Edit: "of a radio group" I meant.

Palastia · August 24, 2012

Hey Adam, thank you for replying. I have had somemore progress. This time I am actually able to insert values from the radiobutton of the child window to the parent window. The problem I am facing at the moment is that even if I were to select none of the radio buttons, all radiobutton values from the child window would still be inserted into the text area of the parent window after i click insert in the child window. Below is the updated code of the child window.

Child window: "retrievemath.php"

<?php
include ('database_connection.php');
  $dbConn = mysql_connect('localhost', 'root', '')
             or trigger_error(mysql_error(), E_USER_ERROR);
  // select the database for use
  mysql_select_db('test', $dbConn);
$query_retrieve_expression = "SELECT * FROM math";
$queryResource = mysql_query($query_retrieve_expression, $dbConn) or die(mysql_error());
?>

<head>

<style type="text/css">
table.hovertable {
font-family: verdana,arial,sans-serif;
font-size:11px;
color:#333333;
border-width: 1px;
border-color: #999999;
border-collapse: collapse;
}
table.hovertable th {
background-color:#c3dde0;
border-width: 1px;
padding: 8px;
border-style: solid;
border-color: #a9c6c9;
}
table.hovertable tr {
background-color:#d4e3e5;
}
table.hovertable td {
border-width: 1px;
padding: 8px;
border-style: solid;
border-color: #a9c6c9;
}
</style>

    <script src="ckeditor/ckeditor.js"></script>
<script type='text/javascript'>
window.onload = function()
{
  document.getElementById('f1').onsubmit = sendToParent;
}
function sendToParent()
{
    var cta='';

    var radio=document.getElementsByName("insert");

    for(var i=0;i<radio.length;i++)
    {
        cta+=radio[i].value;
    }

    var pta = window.opener.document.getElementById("editor1");
    pta.value = cta;
    self.close();

}

</script>
</head>
<body>
        <form id="f1" action="retrievemath.php" method="post">
            <div>
<table class="hovertable">
<tr>
    <th>Insert ?</th><th>Expression Name</th><th>Math Expression</th>
</tr>
    <?php
               while($row = mysql_fetch_assoc($queryResource))
               {               
    ?>              
                    <tr> 
                    <td><input type="radio" name="insert" id="<?php echo $row['mathID']?>" value="<?php echo $row['mathexpression']?>" /> </td> 
                    <td><?php echo $row['expressionname']; ?></td>
                    <td><?php echo $row['mathexpression']; ?></td> 
                    </tr>
                    
    <?php
               }           
    ?>


</table>
            </div>
      <input type="button" value="Insert" onclick="sendToParent();" />
      
        </form>
</body>

Adam · August 24, 2012

Yeah, you're looping through and concatenating each.

Try adding a condition around it:

if (radio[i].checked) {
    var cta = radio[i].value;
    break;
}

Palastia · August 24, 2012

Brilliant! I had completely left that out. Thank you Adam. The last problem I have is that passing the values into a regular text area is fine. But there are problems when attempting to pass the values into CKeditor text area.

Adam · August 24, 2012

CKeditor will replace the textarea you see with an editable iframe, so you can view rich text. You will still be inserting into the textarea, but you just won't be able to see it. Use the CKeditor API to insert the text/html.

http://docs.cksource.com/ckeditor_api/symbols/CKEDITOR.editor.html#insertHtml

http://docs.cksource.com/ckeditor_api/symbols/CKEDITOR.editor.html#insertText

Palastia · August 24, 2012

How can I achieve that exactly in my code? Should I write that in the parent window or child window? I am not really sure when it comes to this. :confused: Thanks.

Adam · August 24, 2012

Looks like Ckeditor just inserts itself into the global scope (so in the parent window object). You should be able to access it just by prefixing the code I linked to with "opener."

Palastia · August 24, 2012

Thanks Adam, I'll be sure to try this out later.

Palastia · August 25, 2012

Shouldn't the line

CKEDITOR.instances.editor1.insertText( ' line1 \n\n line2' );

be in the child window's sendtoParent function?

Adam · August 25, 2012

Yeah, but accessing it through the opener window.

Adam · August 25, 2012

"opener window [object]", that is.

Palastia · August 25, 2012

Umm sorry but I'm still not too sure where exactly I should write it in the parent window.

var xChildWindow = null;
function xWinOpen(sUrl)
{
  // Modify 'features' to suit your needs:
  var features = "left=100,top=100,width=400,height=400,location=0,menubar=0," +
    "resizable=1,scrollbars=1,status=0,toolbar=0";
  if (xChildWindow && !xChildWindow.closed) {xChildWindow.location.href  = sUrl;}
  else {xChildWindow = window.open(sUrl, "myWinName", features);}
  xChildWindow.focus();
  return false;
}

Adam · August 25, 2012

You're inserting the text from the child window, so the code should be there. A nice abstraction would be to have a method within the parent handling the communication with CKeditor though. For example..

In the parent

function sendRichMessage(editorName, message) {
    // ...
}

In the child

opener.sendRichMessage('editor1', 'abcdef');

Palastia · August 25, 2012

So I think it should be like this?

Parent Window:

function sendRichMessage(editorName, message)
{
    CKEDITOR.instances.editor1.insertText(editorName, message);
}

Child Window:

function sendToParent()
{
    var cta='';

    var radio=document.getElementsByName("insert");

    for(var i=0;i<radio.length;i++)
    {
        if (radio[i].checked) {
    var cta = radio[i].value;
    break;
}
    }

    var pta = window.opener.document.getElementById("editor1");
    pta.value = cta;
    opener.sendRichMessage('editor1', cta);
    self.close();

}

Adam · August 25, 2012

function sendRichMessage(editorName, message)
{
    CKEDITOR.instances.editor1.insertText(editorName, message);
}

The first argument to the function is meant to be the editor name, that's used within the CK call. And the CK API doesn't expect the name, given you're referencing it before (instances.editor1).

CKEDITOR.instances[editorName].insertText(message);

    var pta = window.opener.document.getElementById("editor1");
    pta.value = cta;
    opener.sendRichMessage('editor1', cta);
    self.close();

Scrap trying to write to the textarea, CK will do that. You just need to call the parent window's function, which will call the CK API, which will handle it.

Palastia · August 25, 2012

I see! Thank you Adam! Just curious but have you had to deal with mathml in the past before?

Adam · August 25, 2012

Never. I have a fairly vague understanding though.

Palastia · August 25, 2012

Im kinda having a weird issue when attempting to echo mathml into my radiobutton value. It seems that a half of the mathml code is actually leaked outside the radiobutton itself.

Something like this:

Just curious but is there a reason for this?

Adam · August 25, 2012

It looks like it's being output as 'entities'. I would raise a new issue for this, you might get someone with mathml or CKeditor experience join in a lot quicker. Post as much context / code as you think could be relevant though.

Sign In

PHP inserting into parent window text area from child window radio button

Recommended Posts

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Join the conversation

Important Information