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
Code: Select all
<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.