Sending an email using Ajax from CodeIgniter

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 CodeIgniter is and how it works (otherwise you can start to learn here). I assume also you have your own domain and a CodeIgniter application already installed. In this small tutorial we’re going to use a bunch of files:

  • the controller Main
  • the views start_view and contact_view
  • CodeIgniter configuration files config.php and route.php

Configuration files

First be sure that in your config/config.php file the variable $config[‘base_url’] be set correctly to your domain. If your domain is then in the config file we’ll have:

As you know, CodeIgniter allows you to use a really comfortable method to write your links: base_url() method:

Now we can open application/config/route.php file to do some change. I’ll assume that our controller will be the default controller in our app, so in route.php file we’ll have to setup correctly the value of the variable $route[‘default_controller’]. In addition we have to add a line to manage our contact page link:

The controller

In our controller we have only index method which load the start_view:

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

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:

As you can see, there’s nothing special: the method contacts() loads the contact view which displays a form to sen emails: when the user cliks the Send button the method sendemail() 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.

The views

This one is the interesting part, but let me quickly introduce our views. The first is start_view, the one that is loaded when we enter the site visiting thhe url

The start_view:

I suspect we’re going to get a lot of emails…

The contacts_view:

Notice the div with id set to “response” where the message returned by the controller will be displayed.

And, yes, the form is horrible, I know…

And now let’s send an email with Ajax…

We’re finally ready to implement our Ajax code to send email from our CodeIgniter website.

Stay on contacts_view: here we’re going to add our javascript code. First, we include jQuery:

Secondly, we must to let know jQuery something about our base url, so we’ll create a variable called baseUrl to use in opur script:

And finally we can go with tha actual Ajax call:

That’s all: it takes longer to say than to do.

Hope you’ll find useful this article and feel free to leave comments, criticism or everything you want to say… almost everything 😉

Leave a Reply

Your email address will not be published. Required fields are marked *