Jquery form plugin recalling php echo in an iframe

Question

Possible Duplicate:
putting html inside an iframe (using javascript)

I'm using the following code and what I want to do essentially (I'm new to jquery) is submit this form, but then have what is normally outputted on the uploadpic.php page - appear on this page where the form is, in an iframe. I just can't work out how to do it. I added the Jquery Form Plugin - http://www.malsup.com/jquery/form/ So I've gone through the code and commented what it does now. But I've no idea how to add that iframe exchange. Basically the uploadpic.php does this:

$add_one = $membership->add_photo($_POST['photo'], $_POST['caption']);

And if it is all submitted successfully, or if it is a failure, it echos either "sorry your file wasn't uploaded" or "file was uploaded successfully.

How would I stop from having to go to a new page, or resorting to an irritating popup? I thought a temporary iframe would be a good idea - but simply no idea how to implement such a thing.

<div id="uploadform">
            <form id = "uploadpicform" enctype="multipart/form-data" action="uploadpic.php" method="POST"> 
            <p>Photo: </p><input type="file" name="photo"><br />
            <p>Caption:</p> My <input type="text" name="caption"><br />
                   <input type="submit" class="large blue button" value="Add"> 
            </form>
            <script>
            // wait for the DOM to be loaded
            $(document).ready(function() {
                // bind 'myForm' and provide a simple callback function
                $('#uploadpicform').ajaxForm(function() {
                $("#hideuploadbutton").hide();
                $("#uploadbutton").show();
                $("#uploadform").hide();
                });
            });             
            </script>
        </div>

What that does at the moment, is submits the form, with no notice, hides the upload button and shows an open upload button to start the process again. I figure there must be some sort of 'add iframe' or 'print php variable from the other page' option or something.

I'd appreciate any help, thanks a bunch!

Answer 1

EDITED Added code for populating iframe

HTML

<form id="uploadpicform">

    <p>Photo:</p>
    <input type="file" name="photo"><br />
    <p>Caption:</p>
    <input type="text" name="caption"><br />

</form>


<div id="uploadpicbutton" class="bluebutton">Upload</div>

JQuery

// **ADDED** Populate the iframe 
function iframeresults() {  

    var content = phpresults;
    var tFrame = document.getElementById("iframeid");
    var doc = tFrame.contentDocument;
    if (doc == undefined || doc == null)
        doc = tFrame.contentWindow.document;
    doc.open();
    doc.write(content);
    doc.close();

}

//Submit Upload Ajax Call Function

function submit_upload() {

    $('#status').html('Uploading, Please Wait').fadeIn(500);

    $.ajax({
        type: "POST",
        url: "/uploadpic.php",
        cache: false,
        data: $('#uploadpicform').serialize(), //This adds the variable name and input values automatically
        dataType: "script", // Returns Javascript outputted from PHP page and Launches the Script
        success: function(){

        iframeresults();

    });        

}

// Bind the upload function to the button    
$('#uploadpicbutton').on('click', submit_upload); 

PHP

 //Use this echo in your PHP after your PHP Successful validation
 echo "var phpresults = 'Upload Succesful'; ";

 //Use this echo in your PHP after your PHP Failure validation
 echo "var phpresults = 'Upload Failed'; ";