Hello folks, the problem is very straight forward. I have a form which uploads pictures. The form is located in a modal dialog box, so the php script that handles the form is processed within an iframe in the same dialog box as the form. The success or error messages from the script are then echoed out within the iframe. Everything works good so far, but the issue is, I want to transfer those feedback messages from the iframe back into the parent dialog box, specifically into another div within the dialog box which I call upload_pic_feedback. Here is the code I have which wouldn’t work. Any ideas why I got it wrong?
PS I need to transfer the data from iframe to feedback box because at the end of the day, I plan to render the iframe invisible to the user. I also want to hide the form and display the feedback div which by default is hidden when upload has successfully taken place
Main HTML containing the dialog box
<div id = "dialog_box">
<form id = "upload_pic_form" enctype="multipart/form-data" action="picture_upload.php" target = "pic_upload_iframe" method="post">
<input name="MAX_FILE_SIZE" value="10000000" type="hidden">
<input name="picture" accept="image/jpg, image/png, image/jpeg, image/bmp, image/gif, video/*" type="file">
<button class = "button" name="submit" type="submit"> Submit! </button>
</form>
<iframe id = "upload_pic_iframe" name="pic_upload_iframe" width = "100px" height = "100px">
</iframe>
<div id = "upload_pic_feedback" style = "display:none">
<?php
//The picture_upload.php script which handles the form, runs within this iframe. It generates either a
//success or error variable which is echoed below
if(isset($error)){echo $error;}
if(isset($success)){echo $success;}
//And finally here is the script which is supposed to hide the form, show the feedback div and transfer
//the variables from iframe to feedback div
echo"
<script type = 'text/javascript'>
$('#upload_pic_form', top.document).hide();//Hide the form in the parent dialog box
$('#upload_pic_feedback', top.document).show();//Show the feedback div
var send_to_parent = $('#upload_pic_iframe', top.document).html();
$('#upload_pic_feedback', top.document).append(send_to_parent);//Append the data
</script>
";
?>
</div> <!--closes upload pic feedback-->
</div>
PS I’ve also tried parent.document in place of top.document, all in vain.