Simple Ajax Form With Email Attachment Using PHP

https://www.thenerdyblog.
com/simple-ajax-form-
email-attachment-using-php/
Simple Ajax Form With Email Attachment Using

PHP
NERDYSEPTEMBER 2, 201714 COMMENTS 0 1.4K
Today, We are going to learn steps to Ajax Form With Email Attachment Using PHP without refreshing the page.
Below is the step by step explanation.
Before we are getting started, we need a little bit of knowledge about HTML, CSS, PHP and jQuery.
1. HTML form that will collect the information from the user
2. Ajax will gather all the data submitted by the form and send to process.php to send an email
3. process.php will check whether the attachment is there or not and trigger an email.
Filename: index.html
This is the page where we have a simple form that collects all the information from the user to send an email via PHP
mail.
HTML Form
XHTML
1 <form id="contact-form" method="post" enctype="multipart/form-data">

2 <div class="form-group">
3 <label for="fname">First Name:</label>
4 <input type="text" class="form-control" id="fname">
5 </div>
7 <label for="email">Email Address:</label>
8 <input type="email" class="form-control" id="email_address">
9 </div>
11 <label for="attachment">File attachment:</label>
12 <input type="file" name="file_attach" class="input-field"/>
13 </div>
14
15 <button type="button" id="submit" class="btn btn-default btn-dark">Submit</button>
16 </form>
Above form have fields like First Name, Email Address and File attachment. Each input filed has its unique ID to
fetch the data once the form has submitted.
Note : We have set enctype=”multipart/form-data” . This is used for file attachment.
The script that gather all information submitted by the Form and pass the data to process.php to send an email.
JavaScript
1 <script src="http://ajax.googleapis.com/ajax/libs/jquery/2.0.0/jquery.min.js"></script>
2 <script type="text/javascript">
3 $(document).ready(function() {
4
5 $("#submit").click(function(e) {
6
7 var proceed = true;
8
9 if(proceed) //everything looks good! proceed...
10 {
11
12 //data to be sent to server
13 var m_data = new FormData();
14 m_data.append( 'first_name', $('#fname').val());
15 m_data.append( 'email_address', $('#email_address').val());
16 m_data.append( 'file_attach', $('input[name=file_attach]')[0].files[0]);
17
18 //instead of $.post() we are using $.ajax()
19 //that's because $.ajax() has more options and flexibly.
20
21 $.ajax({
22 url: 'process.php',
23 data: m_data,
24 processData: false,
25 contentType: false,
26 type: 'POST',
27 dataType:'json',
28 success: function(response){
29 //load json data from server and output message
30 if(response.type == 'error'){ //load json data from server and output message
31 output = '<div class="error">'+response.text+'</div>';
32 }else{
33 output = '<div class="success">'+response.text+'</div>';
34 }
35 $("#response").hide().html(output).slideDown();
36 }
37 });
38
39
40 }
41
42 });
43 });
44
45 </script>
process.php
 Collect data send by jQuery using Ajax

 Construct the email
 Check whether have attachment or not
 Send Email using the PHP mail function.
PHP
1 <?php
2
3
4
5 //Recepient Email Address
6 $to_email = "your@email.com";
7
8 //check if its an ajax request, exit if not
9 if(!isset($_SERVER['HTTP_X_REQUESTED_WITH']) AND strtolower($_SERVER['HTTP_X_REQUESTED_WITH']) != 'xmlhttprequest') {
10 $output = json_encode(array( //create JSON data
11 'type'=>'error',
12 'text' => 'Sorry Request must be Ajax POST'
13 ));
14 die($output); //exit script outputting json data
15 }
16
17 //Sanitize input data using PHP filter_var().
18 $first_name = filter_var($_POST["first_name"], FILTER_SANITIZE_STRING);
19 $email_address = filter_var($_POST["email_address"], FILTER_SANITIZE_EMAIL);
20 $subject = "Your Email Subject Goes Here...";
21
22
23 //Textbox Validation
24 if(strlen($first_name)<4){ // If length is less than 4 it will output JSON error.
25 $output = json_encode(array('type'=>'error', 'text' => 'Name is too short or empty!'));
26 die($output);
27 }
28
29
30
31 $message = '<html><body>';
32 $message .= '<table rules="all" style="border-color: #666;" cellpadding="10">';
33 $message .= "<tr style='background: #eee;'><td><strong>First Name:</strong> </td><td>" . strip_tags($_POST['first_name']) . "</td></tr>";
34 $message .= "<tr><td><strong>Email Address :</strong> </td><td>" . strip_tags($_POST['email_address']) . "</td></tr>";
35 $message .= "</table>";
36 $message .= "</body></html>";
37
38
39 $file_attached = false;
40 if(isset($_FILES['file_attach'])) //check uploaded file
41 {
42 //get file details we need
43 $file_tmp_name = $_FILES['file_attach']['tmp_name'];
44 $file_name = $_FILES['file_attach']['name'];
45 $file_size = $_FILES['file_attach']['size'];
46 $file_type = $_FILES['file_attach']['type'];
47 $file_error = $_FILES['file_attach']['error'];
48
49
50
51 //exit script and output error if we encounter any
52 if($file_error>0)
53 {
54 $mymsg = array(
55 1=>"The uploaded file exceeds the upload_max_filesize directive in php.ini",
56 2=>"The uploaded file exceeds the MAX_FILE_SIZE directive that was specified in the HTML form",
57 3=>"The uploaded file was only partially uploaded",
58 4=>"No file was uploaded",
59 6=>"Missing a temporary folder" );
60
61 $output = json_encode(array('type'=>'error', 'text' => $mymsg[$file_error]));
62 die($output);
63 }
64
65 //read from the uploaded file & base64_encode content for the mail
66 $handle = fopen($file_tmp_name, "r");
67 $content = fread($handle, $file_size);
68 fclose($handle);
69 $encoded_content = chunk_split(base64_encode($content));
70 //now we know we have the file for attachment, set $file_attached to true
71 $file_attached = true;
72
73
74
75
76 }
77
78
79
80 if($file_attached) //continue if we have the file
81 {
82
83 // a random hash will be necessary to send mixed content
84 $separator = md5(time());
85
86 // carriage return type (RFC)
87 $eol = "\r\n";
88
89 // main header (multipart mandatory)
90 $headers = "From:Fromname <info@fromemail.com>" . $eol;
91 $headers .= "MIME-Version: 1.0" . $eol;
92 $headers .= "Content-Type: multipart/mixed; boundary=\"" . $separator . "\"" . $eol;
93 $headers .= "Content-Transfer-Encoding: 7bit" . $eol;
94 $headers .= "This is a MIME encoded message." . $eol;
95
96 // message
97 $body .= "--" . $separator . $eol;
98 $body .= "Content-type:text/html; charset=utf-8\n";
99 $body .= "Content-Transfer-Encoding: 7bit\r\n\r\n";
100 $body .= $message . $eol;
101
102 // attachment
103 $body .= "--" . $separator . $eol;
104 $body .= "Content-Type:".$file_type." ";
105 $body .= "Content-Type: application/octet-stream; name=\"" . $file_name . "\"" . $eol;
106 $body .= "Content-Transfer-Encoding: base64" . $eol;
107 $body .= "Content-Disposition: attachment; filename=\"".$file_name."\"". $eol;
108 $body .= $encoded_content . $eol;
109 $body .= "--" . $separator . "--";
110
111 }
112 else
113 {
114
115 $eol = "\r\n";
116
117 $headers = "From: Fromname <info@fromemail.com>" . $eol;
118 $headers .= "Reply-To: ". strip_tags($email_address) . "\r\n";
119 $headers .= "MIME-Version: 1.0\r\n";
120 $headers .= "Content-Type: text/html; charset=ISO-8859-1\r\n";
121 $body .= $message . $eol;
122
123 }
124
125
126 $send_mail = mail($to_email, $subject, $body, $headers);
127
128 if(!$send_mail)
129 {
130 //If mail couldn't be sent output error. Check your PHP email configuration (if it ever happens)
131 $output = json_encode(array('type'=>'error', 'text' => 'Could not send mail! Please check your PHP mail configuration.'));
132 die($output);
133 }else{
134 $output = json_encode(array('type'=>'message', 'text' => 'Hi '.$first_name .' Thank you for your order, will get back to you shortly'));
135 die($output);
136 }
137
138 ?>

Simple Ajax Form With Email Attachment Using PHP

Uploaded by

Copyright:

Available Formats

Simple Ajax Form With Email Attachment Using PHP

Uploaded by

Document Information

Original Title

Copyright

Available Formats

Share this document

Share or Embed Document

Sharing Options

Did you find this document useful?

Is this content inappropriate?

Copyright:

Available Formats

Simple Ajax Form With Email Attachment Using PHP

Uploaded by

Copyright:

Available Formats

https://www.thenerdyblog.

Simple Ajax Form With Email Attachment Using

1 <form id="contact-form" method="post" enctype="multipart/form-data">

Note : We have set enctype=”multipart/form-data” . This is used for file attachment.

 Collect data send by jQuery using Ajax

You might also like

Pfad - The Proxy pFad of © 2024 Garber Painting. All rights reserved.