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

Question

I'm trying to append a textarea to a small form that exists within a Shadowbox. The Shadowbox is called from a button:

<input type="button" value="Upload" onClick="uploadImageSB();">

The javascript to invoke the Shadowbox is written as follows:

<script type="text/javascript" src="../tribnet_2013/shadowbox-3.0.3/shadowbox.js"></script>
    <script type="text/javascript">

        Shadowbox.init({

        });

        function uploadImageSB() {

            // shadowbox for 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 you can see, I'm also grabbing the contents of my TinyMCE editor from the same page that called the Shadowbox (this part is working fine).

The form in the Shadowbox looks like 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 to 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 the shadow box is also working fine. Note that I have a target="_parent" in the form tag. I'm not sure that's right ... I think it prevents my Shadowbox from closing properly (need help with this).

What I'd like to do is ... take the markup in my content variable and ...

1) dynamically create a textarea called "ta" 2) put the content into ta 3) append ta to the form in the Shadowbox 4) submit the form

Everything works except the append. I've tried to do this using the Shadowbox options onOpen and onClose. It fails. Probably because the form is in an iframe!

I've tried to deal with the iframe too, but I can't get it to work. I thought I could make the Shadowbox object a child of the page that contains the iframe using:

window.parent.Shadowbox.open({})

But I can't get that to work either. I'm a little out of my depth ... would really appreciate some help :)

Thanks!

Answer 1

The shadowbox's iframe id is sb-player, so you should access the iframe content.

Pure javascript method,

options: {
  onFinish: function() {
    var iframe = document.getElementById('sb-player');
    iframe.addEventListener("load", function() {
        var ed = tinymce.activeEditor; // get editor instance
        var content = ed.save(); // get the 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);

  }
}