Stay in ajax colorbox when submitting form

[kischi]

Hi, I have made a small program that enables a user to upload an image and gets it sent back to the users email with a watermark on it.

The place where the user uploads the image is in an ajax colorbox and in order for it to send the form I use another file called somefile.php.

When the form is sent succesfulle it writes mail send completed.
But it redirects to the page called somefile.php.

is it possible to have the message come in the ajax box and not redirect to a new page when submit is pressed.

I hope you understand what I meen.

My html code looks like this:

<div id="form">
    <form method="post" action=" somefile.php " enctype="multipart/form-data">
        <label for="Upload Image">Upload Image</label>
        <input name="file_name" type="file">
        <div class="input-row"><label for="mail">E-mail: </label><input id="mail" name="mail" type="text" /></div>
        <input name="upload" value="Upload" type="submit">
    </form>
</div><!-- end form -->

han my php code looks like this:

<?php
    include_once( 'class/class.upload.php' );
    if(isset($_POST['upload'])){
        $filname=$_FILES['file_name'];
        $handle = new upload($filname);
        $handle->allowed = array('image/*');
        if($handle->uploaded){
            $handle->image_border          = 5;   // defining border width
            $handle->image_border_color    = '#000'; // defining border color
            $handle->image_watermark = 'badge.png';  // watermark image src
            $handle->image_watermark_position = 'BR'; // watermark image position again "B" for bottom and so on.
            $handle->image_resize         = true;   // making resize function to true
            $handle->image_x              = 160;    // making width to 160px
            $handle->image_y              = 160;    // making hight to 160px
            $handle->process('uploads/');
            if ($handle->processed) {

                //$message = '<div class="center"><p>Border color #F58462 added successfully</p><img src="uploads/'.$handle->file_dst_name.'" alt="" /></div>';





                 //*** Uniqid Session ***//
    $strSid = md5(uniqid(time()));
    $to = $_POST['mail'];
    $from = '[e-mail]'; 
    $subject = 'the subject';
    $headers = 'From: '.$from. "\r\n" . 'Reply-To: '.$from. "\r\n";
    $headers .= "MIME-Version: 1.0\n";
    $headers .= "Content-Type: multipart/mixed; boundary=\"".$strSid."\"\n\n";
    $headers .= "This is a multi-part message in MIME format.\n";
    $headers .= "--".$strSid."\n";
    $headers .= "Content-type: text/html; charset=utf-8\n";
    $headers .= "Content-Transfer-Encoding: 7bit\n\n";
    if($_FILES["file_name"]["name"] != "") {
    $strFilesName = $_FILES["file_name"]["name"];
    $strContent = chunk_split(base64_encode(file_get_contents('uploads/'.$strFilesName)));
    $headers .= "--".$strSid."\n";
    $headers .= "Content-Type: application/octet-stream; name=\"".$strFilesName."\"\n";
    $headers .= "Content-Transfer-Encoding: base64\n";
    $headers .= "Content-Disposition: attachment; filename=\"".$strFilesName."\"\n\n";
    $headers .= $strContent."\n\n";
    }
    $flgSend = @mail($to, $subject, $message, $headers); // @ = No Show Error //
   if($flgSend){
echo "Mail send completed.";
$tmpfile = 'uploads/'.$strFilesName;
// http://php.net/manual/en/function.file-exists.php
if(file_exists($tmpfile)) {
// http://php.net/manual/en/function.unlink.php
unlink($tmpfile);
}
}
else{
echo "Cannot send mail.";
}
            }
        }
    }
?>

[kischi]

I forgot to write, you can see the example here:

www.wearecrunch.dk/gammelsjuf

And then click the profile link in the top right corner.

[JJenZz]

There are two options...

1) Make the content of your colorbox an iframe that loads the image uploader. That way when you submit the form it will be submitting that iframe and not the whole page.

<div id="form">
    <!-- imageUploader.php contains your original form code -->
    <iframe src="imageUploader.php" width="whatever" height="whatever" frameborder="0"></iframe>
</div>

The downside to this is that you need to know the width and height of your uploader and it may cause scrollbars which don't make it look as seamless.

2) Make the target of your form a hidden iframe elsewhere on the page. That way the form will submit to that iframe.

<div id="form">
    <form target="imageUploader" method="post" action="somefile.php" enctype="multipart/form-data">
        <label for="Upload Image">Upload Image</label>
        <input name="file_name" type="file">
        <div class="input-row"><label for="mail">E-mail: </label><input id="mail" name="mail" type="text" /></div>
        <input name="upload" value="Upload" type="submit">
    </form>
</div>
<iframe name="imageUploader" style="display: none;"></iframe>

Obviously inline styles are not recommended but I've just used them here to demonstrate what I mean.

There is a jQuery plugin that utilises method 2 and creates the iframe on the fly for you. It also collects the response from the iframe so you can return your success/failure message back in the colorbox: http://archive.plugins.jquery.com/project/iframe-post-form