Stay in Ajax color box when submitting

This site is best viewed in a modern browser with JavaScript enabled.

kischi

Hi, don't know if this is the right place to post, but I couldn't find an AJAX forum.

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.

You can see an example on:
www.wearecrunch.dk/gammelsjuf

and click profile in the top right corner.

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 -->

and my php:

<?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 = 'my@gmail.com'; 
$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.";
}
            }
        }
    }
?>

ZABI

try this http://www.simonerodriguez.com/ajax-form-submit-example/

kischi

Hmm it still redirects me to somefile.php.
But I'm not sure I did it correctly.

Now my html looks like this:

<div id="form">
    <form method="post" action=" somefile.php " name="profile" enctype="multipart/form-data" onsubmit="xmlhttpPost('somefile.php, 'profile', 'MyResult'>'); return false;">
        <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 -->
<div id="MyResult"></div>

and I'm not sure about the myresult, if I understood that correctly

ZABI

onsubmit="xmlhttpPost('somefile.php', 'profile', 'MyResult'); return false;"

kischi

Hmm it still redirect to a new page "somfile.php" and shows "mail send completed" on the new page.

Should this still be there in the bottom of the HTML?
<div id="MyResult"></div>

And should the action attribute in the form still direct to somefile.php

Now my html looks like this:


<div id="form">
    <form method="post" action=" somefile.php " name="profile" enctype="multipart/form-data" onsubmit="xmlhttpPost('somefile.php', 'profile', 'MyResult'); return false;" ">
        <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 -->
<div id="MyResult"></div>

And my php 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 = 'adamkischi@gmail.com'; 
$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.";
}
            }
        }
    }
?>