javascript - How do I append an element to a form inside a Shadowbox -

i'm trying append textarea small form exists within shadowbox. shadowbox called button:

<input type="button" value="upload" onclick="uploadimagesb();"> 

the javascript invoke shadowbox written follows:

<script type="text/javascript" src="../tribnet_2013/shadowbox-3.0.3/shadowbox.js"></script>     <script type="text/javascript">          shadowbox.init({          });          function uploadimagesb() {              // shadowbox image upload             shadowbox.open({                 content:    'http://mydomain.com/cgi-bin/photo.cgi',                 player:     'iframe',                 title:      'image upload',                 height:     200,                 width:      500,                 options: {                     onopen: function() {                          var ed = tinymce.activeeditor;                         var content = ed.save();                          var ta = document.createelement('textarea');                         ta.textcontent = content;                         ta.name = 'editor';                         ta.value = ta.textcontent;                          var form = document.getelementbyid('photoform');                         form.appendchild(ta);                     }                 }             });          };      </script> 

as can see, i'm grabbing contents of tinymce editor same page called shadowbox (this part working fine).

the form in shadowbox looks this:

<form id="photoform" enctype="multipart/form-data" name="photoform" action="[% base_url %]/cgi-bin/photo.cgi" method="post" target="_parent">      <table border="0" cellpadding="0" cellspacing="0">          <tr><td colspan="4" style="height: 50px;"></td></tr>          <tr>             <td style="width: 25px;"></td>             <td style="width: 175px;"><label>image name:</label></td>             <td style="width: 275px;"><input type="text" name="image_name" size="20" maxlength="30"></td>             <td style="width: 25px;"></td>         </tr>          <tr><td colspan="4" style="height: 20px;"></td></tr>          <tr>             <td style="width: 25px;"></td>             <td style="width: 175px;"><label>load image:</label></td>             <td style="width: 275px;"><input type="file" name="image_file" size="20"></td>             <td style="width: 25px;"></td>         </tr>          <tr><td colspan="4" style="height: 20px;"></td></tr>          <tr>             <td style="width: 25px;"></td>             <td style="width: 175px;"><label>press button upload:</td>             <td style="width: 275px;"><input type="submit" value="upload" name="upload"></td>             <td style="width: 25px;"></td>         </tr>          <tr><td colspan="4" style="height: 20px;"></td></tr>      </table>      <input type="hidden" name="function" value="photo_upload_process">  </form> 

the form in shadow box working fine. note have target="_parent" in form tag. i'm not sure that's right ... think prevents shadowbox closing (need this).

what i'd ... take markup in content variable , ...

1) dynamically create textarea called "ta" 2) put content ta 3) append ta form in shadowbox 4) submit form

everything works except append. i've tried using shadowbox options onopen , onclose. fails. probably because form in iframe!

i've tried deal iframe too, can't work. thought make shadowbox object child of page contains iframe using:

window.parent.shadowbox.open({}) 

but can't work either. i'm little out of depth ... appreciate :)

thanks!

the shadowbox's iframe id sb-player, should access iframe content.

pure javascript method,

options: {   onfinish: function() {     var iframe = document.getelementbyid('sb-player');     iframe.addeventlistener("load", function() {         var ed = tinymce.activeeditor; // editor instance         var content = ed.save(); // editor content         var ta = document.createelement('textarea');         ta.textcontent = content;         ta.name = 'editor';         ta.value = ta.textcontent;         var iframecontent = this.contentdocument || this.contentwindow.document;         var form = iframecontent.getelementbyid('photoform');         form.appendchild(ta);     },true);    } }