How to display success message in a form submit after sending a mail successfully using malsup form jquery without page refresh

Question

I need to display success message after uploading a form and send it as an attachment in mail.I need to implement this by using malups form js.How to write jquery function for this and also i have to do this without refresh the page.

By using the ajaxForm function() i can able to display alert instead of this i need to show a success message in a div after sending the mail successfully with attachment.

php

 <?php
if ($_SERVER['REQUEST_METHOD']=="POST"){

   // Set the "To" email address
   $to="abc@gmail.com";

    //Subject of the mail
   $subject="Join Us E-mail with Resume attachment";



    // Check for empty fields

    if($_FILES['filename']['tmp_name']==""){
            echo '<font style="font-family:Verdana, Arial; font-size:11px; color:#F3363F; font-weight:bold">Please upload your resume</font>';
        }

   //if(empty($_POST['name'])  || empty($_POST['email']) || empty($_POST['message']))
//  {
//      /*$errors .= "\n Error: all fields are required";*/
//       echo '<font style="font-family:Verdana, Arial; font-size:11px; color:#F3363F; font-weight:bold">Please upload resume</font>';
//  }



   // Now Generate a random string to be used as the boundary marker
   $mime_boundary="==Multipart_Boundary_x".md5(mt_rand())."x";

   // Now Store the file information to a variables for easier access
   $tmp_name = $_FILES['filename']['tmp_name'];
   $type = $_FILES['filename']['type'];
   $file_name = $_FILES['filename']['name'];
   $size = $_FILES['filename']['size'];

   // Now here we setting up the message of the mail
   $message = "Uploaded file: $file_name";

   // Check if the upload succeded, the file will exist
   if (file_exists($tmp_name)){

      // Check to make sure that it is an uploaded file and not a system file
      if(is_uploaded_file($tmp_name)){

         // Now Open the file for a binary read
         $file = fopen($tmp_name,'rb');

         // Now read the file content into a variable
         $data = fread($file,filesize($tmp_name));

         // close the file
         fclose($file);

         // Now we need to encode it and split it into acceptable length lines
         $data = chunk_split(base64_encode($data));
     }

      // Now we'll build the message headers
      $headers = "From: $from\r\n" .
         "MIME-Version: 1.0\r\n" .
         "Content-Type: multipart/mixed;\r\n" .
         " boundary=\"{$mime_boundary}\"";

      // Next, we'll build the message body note that we insert two dashes in front of the  MIME boundary when we use it
      $message = "This is a multi-part message in MIME format.\n\n" .
         "--{$mime_boundary}\n" .
         "Content-Type: text/plain; charset=\"iso-8859-1\"\n" .
         "Content-Transfer-Encoding: 7bit\n\n" .
         $message . "\n\n";

      // Now we'll insert a boundary to indicate we're starting the attachment we have to specify the content type, file name, and disposition as an attachment, then add the file content and set another boundary to indicate that the end of the file has been reached
      $message .= "--{$mime_boundary}\n" .
         "Content-Type: {$type};\n" .
         " name=\"{$file_name}\"\n" .
         //"Content-Disposition: attachment;\n" .
         //" filename=\"{$fileatt_name}\"\n" .
         "Content-Transfer-Encoding: base64\n\n" .
         $data . "\n\n" .
         "--{$mime_boundary}--\n";

      // Thats all.. Now we need to send this mail... :)
      if (@mail($to, $subject, $message, $headers))
      {
       echo "success"; 
      }else
      {
         echo "failed";
      }
   }
}
?>

HTML

<form id="myform" action="<?php echo $_SERVER['PHP_SELF']; ?>" method="post" enctype="multipart/form-data">

<input id="tele" type="file" name="filename"/>
<br/>
<input  class="formbtn" type="submit" id="upload" value="Upload" />
</form>

Jquery

<script>
$(document).ready(function () {

    $('#myform').validate({
        rules: {
            filename: {
                required: true,
                extension: "docx|rtf|doc|pdf"
            }
        },
        messages: {
            filename: {
                required: "Please upload resume",
                extension: "Please upload valid file formats"
            }
        }
    });

});
</script>
<script> 
    $(document).ready(function() { 
        $('#myform').ajaxForm(function() { 

           alert('success');
        }); 
    }); 

</script> 

Answer 1

Before the below code make sure you have a div of id msg-div (name's your choice) and by default set its display to none

<script> 
    $(document).ready(function() { 
        $('#myform').ajaxForm(function() { 
           $('#msg-div').css('display','block')
           $('#msg-div').html('success message here')
        }); 
    }); 
</script> 

Answer 2

If I understand well your problem, you now are able to alert the message, but you want to load it into a div.

That should be as easy as:

$("#yourContainerDiv").html(yourAlertString);

If you need to create the div you can add any HTML you need on your string and attach it to the final container. You can also use:

$("#containerWhereYouWantToAppendMessage").append(htmlCodeWithMessage);