$route['default_controller'] = 'Main';\r\n$route['404_override'] = '';\r\n$route['contacts'] = 'Main\/contacts';<\/pre>\nThe controller<\/h2>\n
In our controller we have only index method which load the start_view:<\/p>\n
public function contacts() { \r\n $this->load->view( 'start_view' );\r\n}<\/pre>\nIn the start_view we’ll just display a link to our contact form. I confess you’ll find very poor the style of these pages, but we have to focus on underlying code, isn’t it?<\/p>\n
In Main controller we have to manage also the loading of the contact view and the method which actually sends our emails. The complete controller scripts looks like this one:<\/p>\n
<?php\r\n\r\nif (!defined('BASEPATH')) {\r\n\texit('No direct script access allowed');\r\n}\r\n\r\nclass Main extends CI_Controller {\r\n\r\n public function index()\r\n {\r\n\t$this->load->view( 'start_view' );\r\n }\r\n\r\n public function contacts()\r\n {\r\n\t$this->load->view( 'contacts_view' );\r\n }\r\n\r\n public function sendemail()\r\n {\r\n $name = $_POST['name'];\r\n $email = $_POST['email'];\r\n $message = $_POST['message'];\r\n $to = 'mailbox@mydomain.com';\r\n $subject = 'New message from your website';\r\n $headers = \"From: \" . strip_tags($email) . \"\\r\\n\";\r\n $headers .= \"Reply-To: \". strip_tags($email) . \"\\r\\n\";\r\n $headers .= \"MIME-Version: 1.0\\r\\n\";\r\n $headers .= \"Content-Type: text\/html; charset=ISO-8859-1\\r\\n\";\r\n if (mail($to, $subject, $message, $headers))\r\n {\r\n echo 'Your message has been correctly sent. Thank you for contacting us: we'll reply as soon as possible<br><h4 style=\"text-align: right;\">Lo Our staff<\/h4>';\r\n }\r\n else\r\n {\r\n echo 'Ooops, I'm sorry but something went wrong sending your message. Please contact us at this address: '.safe_mailto( support@yourdomain.com );\r\n }\r\n }\r\n}<\/pre>\nAs you can see, there’s nothing special: the method contacts()<\/em> loads the contact view which displays a form to sen emails: when the user cliks the Send button the method sendemail()<\/em> actually sends an image and echoes a message accordingly. This method is not reached by CodeIgniter through the routing system after a form submission: it’s instead called by jQuery through an Ajax call: this is the reason why this method doesn’t load any view: the view remain the current one, that is contact_view.<\/em><\/p>\nThe views<\/h2>\n
This one is the interesting part, but let me quickly introduce our views. The first is start_view<\/em>, the one that is loaded when we enter the site visiting thhe url www.mydomain.com<\/em><\/p>\nThe start_view:<\/em><\/p>\n<?php\r\ndefined('BASEPATH') OR exit('No direct script access allowed');\r\n?>\r\n<!DOCTYPE html>\r\n<html lang=\"en\">\r\n <head>\r\n <meta charset=\"utf-8\">\r\n <title>Send email Start page<\/title>\r\n <\/head>\r\n <body>\r\n <h1>The start view<\/h1>\r\n <p>If you don't like this page you can notify me using our <a href=\"<?php echo base_url('contacts'); ?>\">contacts<\/a> page.<\/p>\r\n <\/body>\r\n<\/html><\/pre>\nI suspect we’re going to get a lot of emails…<\/p>\n
The contacts_view<\/em>:<\/p>\n<?php\r\ndefined('BASEPATH') OR exit('No direct script access allowed');\r\n?>\r\n<!DOCTYPE html>\r\n<html lang=\"en\">\r\n <head>\r\n <meta charset=\"utf-8\">\r\n <title>Send email Start page<\/title>\r\n <\/head>\r\n <body>\r\n <h1>The contact view<\/h1>\r\n <p>Use the form to send us an email:<\/p>\r\n <div id=\"response\"><\/div>\r\n <form>\r\n <label for=\"email\">Email<\/label>\r\n <input id=\"email\" type=\"text\" placeholder=\"Email\" \/>\r\n <br>\r\n <label for=\"name\">Nome<\/label>\r\n <input id=\"name\" type=\"text\" placeholder=\"Name\" \/>\r\n <br>\r\n <textarea id=\"message\" placeholder=\"Your message here...\"><\/textarea>\r\n <br>\r\n <button id=\"send\"> Send <\/button>\r\n <\/form>\r\n <\/body>\r\n<\/html><\/pre>\nNotice the div with id set to “response” where the message returned by the controller will be displayed.<\/p>\n
And, yes, the form is horrible, I know…<\/p>\n
And now let’s send an email with Ajax…<\/h2>\n
We’re finally ready to implement our Ajax code to send email from our CodeIgniter website.<\/p>\n
Stay on contacts_view<\/em>: here we’re going to add our javascript code. First, we include jQuery:<\/p>\n<script src=\"https:\/\/ajax.googleapis.com\/ajax\/libs\/jquery\/1.11.1\/jquery.min.js\"><\/script><\/pre>\nSecondly, we must to let know jQuery something about our base url, so we’ll create a variable called baseUrl<\/em> to use in opur script:<\/p>\n<script type=\"text\/javascript\"> \r\n var baseUrl = \"<?php print base_url(); ?>\";\r\n<\/script><\/pre>\nAnd finally we can go with tha actual Ajax call:<\/p>\n
$( document ).on( 'click', '#send', function ( e ) {\r\n e.preventDefault();\r\n \/\/hide response if it's visible\r\n $( '#response' ).hide();\r\n \/\/we grab all fields values to create our email\r\n var name = $( '#name' ).val();\r\n var email = $( '#email' ).val();\r\n var message = $( '#message' ).val();\r\n if ( name === '' || email === '' || message === '' )\r\n {\r\n \/\/all fields are rquired so if one of them is empty the function returns\r\n return;\r\n }\r\n \/\/if it's all right we proceed\r\n $.ajax( {\r\n type: 'post',\r\n \/\/our baseurl variable in action will call the sendemail() method in our default controller\r\n url: baseurl + 'sendemail',\r\n data: { name: name, email: email, message: message },\r\n success: function ( result )\r\n {\r\n \/\/Ajax call success and we can show the value returned by our controller function\r\n $( '#response' ).html( result ).fadeIn( 'slow' ).delay( 3000 ).fadeOut( 'slow' );\r\n $( '#name' ).val( '' );\r\n $( '#email' ).val( '' );\r\n $( '#message' ).val( '' );\r\n },\r\n error: function ( result )\r\n {\r\n \/\/Ajax call failed, so we inform the user something went wrong\r\n $( '#response' ).html( 'Server unavailable now: please, retry later.' ).fadeIn( 'slow' ).delay( 3000 ).fadeOut( 'slow' );\r\n $( '#name' ).val( '' );\r\n $( '#email' ).val( '' );\r\n $( '#message' ).val( '' );\r\n }\r\n } );\r\n} );<\/pre>\nThat’s all: it takes longer to say than to do.<\/p>\n
Hope you’ll find useful this article and feel free to leave comments, criticism or everything you want to say… almost everything \ud83d\ude09<\/p>\n","protected":false},"excerpt":{"rendered":"
In this small article I’ll show use how to send an email from your CodeIgniter website without submitting a form and reloading the page, but using Ajax to call a controller method and get instantly the response in your page. Setting up CodeIgniter part. If you are reading this, I suppose you already know what […]<\/p>\n","protected":false},"author":3,"featured_media":297,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"_gspb_post_css":"","footnotes":""},"categories":[34],"tags":[10,8,11,9,12],"post_folder":[142],"class_list":["post-33","post","type-post","status-publish","format-standard","has-post-thumbnail","hentry","category-other-stuff","tag-ajax","tag-codeigniter","tag-email","tag-jquery","tag-send"],"_links":{"self":[{"href":"https:\/\/codingfix.com\/wp-json\/wp\/v2\/posts\/33","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/codingfix.com\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/codingfix.com\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/codingfix.com\/wp-json\/wp\/v2\/users\/3"}],"replies":[{"embeddable":true,"href":"https:\/\/codingfix.com\/wp-json\/wp\/v2\/comments?post=33"}],"version-history":[{"count":0,"href":"https:\/\/codingfix.com\/wp-json\/wp\/v2\/posts\/33\/revisions"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/codingfix.com\/wp-json\/wp\/v2\/media\/297"}],"wp:attachment":[{"href":"https:\/\/codingfix.com\/wp-json\/wp\/v2\/media?parent=33"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/codingfix.com\/wp-json\/wp\/v2\/categories?post=33"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/codingfix.com\/wp-json\/wp\/v2\/tags?post=33"},{"taxonomy":"post_folder","embeddable":true,"href":"https:\/\/codingfix.com\/wp-json\/wp\/v2\/post_folder?post=33"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}