Last active
August 8, 2023 08:41
-
-
Save sivadass/946c58719cfa7b8f25c6880f51f1bf72 to your computer and use it in GitHub Desktop.
PHP Mailer - Ajax Submission
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| <!doctype html> | |
| <html class="no-js" lang=""> | |
| <head> | |
| <meta charset="utf-8"> | |
| <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1"> | |
| <title>Ping</title> | |
| <meta name="description" content=""> | |
| <meta name="viewport" content="width=device-width, initial-scale=1"> | |
| <link rel="apple-touch-icon" href="apple-touch-icon.png"> | |
| <style> | |
| #loader{ | |
| display: none; | |
| } | |
| </style> | |
| </head> | |
| <body> | |
| <div class="container"> | |
| <form id="pingForm"> | |
| <div class="form-group"> | |
| <input type="text" placeholder="Full Name" id="fullname" name="fullname"/> | |
| </div> | |
| <div class="form-group"> | |
| <input type="email" placeholder="Email Address" id="email" name="email"/> | |
| </div> | |
| <div class="form-group"> | |
| <input type="number" placeholder="Mobile Number" id="mobile" name="mobile"> | |
| </div> | |
| <div class="form-group"> | |
| <select name="category" id="category"> | |
| <option value="" selected disabled>Choose Category</option> | |
| <option value="Dance">Dancing</option> | |
| <option value="Music">Music</option> | |
| <option value="Painting">Paints and Arts & Crafts</option> | |
| <option value="Magic">Street Magic</option> | |
| </select> | |
| </div> | |
| <div class="form-group"> | |
| <textarea placeholder="Message" id="message" name="message"/></textarea> | |
| </div> | |
| <button type="submit">SEND <img id="loader" src="https://res.cloudinary.com/sivadass/image/upload/v1498134389/icons/loader.gif" alt="loading"></button> | |
| </form> | |
| </div> | |
| <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.2/jquery.min.js"></script> | |
| <script src="https://cdn.jsdelivr.net/jquery.validation/1.16.0/jquery.validate.min.js"></script> | |
| <script src="main.js"></script> | |
| </body> | |
| </html> |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| $(document).ready(function() { | |
| $('#pingForm').validate({ | |
| rules: { | |
| fullname: "required", | |
| email: { | |
| required: true, | |
| email: true | |
| }, | |
| mobile: { | |
| required: true, | |
| number: true | |
| }, | |
| category: "required" | |
| }, | |
| errorElement: "span" , | |
| messages: { | |
| fullname: "Please enter your sweet name", | |
| email: "Please enter valid email address", | |
| mobile: "Please enter your mobile number", | |
| category: "Please choose category" | |
| }, | |
| submitHandler: function(form) { | |
| var dataparam = $('#pingForm').serialize(); | |
| $.ajax({ | |
| type: 'POST', | |
| async: true, | |
| url: 'process.php', | |
| data: dataparam, | |
| datatype: 'json', | |
| cache: true, | |
| global: false, | |
| beforeSend: function() { | |
| $('#loader').show(); | |
| }, | |
| success: function(data) { | |
| if(data == 'success'){ | |
| console.log(data); | |
| } else { | |
| $('.no-config').show(); | |
| console.log(data); | |
| } | |
| }, | |
| complete: function() { | |
| $('#loader').hide(); | |
| } | |
| }); | |
| } | |
| }); | |
| }); |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| <?php | |
| require 'mailer/PHPMailerAutoload.php'; | |
| $mail = new PHPMailer; | |
| // Form Data | |
| $fullname = $_REQUEST['fullname'] ; | |
| $email = $_REQUEST['email'] ; | |
| $mobile = $_REQUEST['mobile']; | |
| $category = $_REQUEST['category'] ; | |
| $message = $_REQUEST['message'] ; | |
| $mailbody = 'New Lead Enquiry' . PHP_EOL . PHP_EOL . | |
| 'Name: ' . $fullname . '' . PHP_EOL . | |
| 'Mobile:' . $mobile . '' . PHP_EOL . | |
| 'Interested In: ' . $category . '' . PHP_EOL . | |
| 'Message: ' . $message . '' . PHP_EOL; | |
| $mail->isSMTP(); // Set mailer to use SMTP | |
| $mail->Host = 'smtp.gmail.com'; // Specify main and backup SMTP servers | |
| $mail->SMTPAuth = true; // Enable SMTP authentication | |
| $mail->Username = '[email protected]'; // SMTP username | |
| $mail->Password = '33110055'; // SMTP password | |
| $mail->SMTPSecure = 'tls'; // Enable TLS encryption, `ssl` also accepted | |
| $mail->Port = 587; // TCP port to connect to | |
| $mail->setFrom('[email protected]', 'WebMaster'); // Admin ID | |
| $mail->addAddress('[email protected]', 'Business Owner'); // Business Owner ID | |
| $mail->addReplyTo($email, $fullname); // Form Submitter's ID | |
| $mail->isHTML(false); // Set email format to HTML | |
| $mail->Subject = 'New Lead Enquiry'; | |
| $mail->Body = $mailbody; | |
| if(!$mail->send()) { | |
| echo 'Message could not be sent.'; | |
| echo 'Mailer Error: ' . $mail->ErrorInfo; | |
| } else { | |
| echo 'Message has been sent'; | |
| } |
It works, just pay attention to "process.php" at line 40, because it must echo "success" and not "Message has been sent" or else jQuery function on "main.js" at line 37 will fail.
which line should be commented please...
Ensure the response from your php script is either "success" or "failure" and you can now compare it in your js script
success: function(data) {
if(data == 'success'){
console.log(data);
} else {
$('.no-config').show();
console.log(data);
}
},
Else, the script will not respond.
How to print success or failed message to html?
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment
Comment out this line, if email sending is failed when running on production server.