How to register a user with jQuery Ajax in Joomla

If your are a Joomla developer sometimes you encounter a task which needs to produce jQuery Ajax call in order to register a new user at a Joomla CMS based site. In this case this article will help you to implement this feature on your site.
So first open Joomla User Manager: Main menu -> Users -> User Manager, then click 'Options' button on the right. Set 'Allow User Registration' to 'Yes'. Set 'New User Account Activation' parameter to 'none'.
Then add HTML form to your page. Register User form sample HTML code: <form method="post" action="#" id="userForm"> <label for="username">Username</label> <input type="text" value="" name="username"> <label for="email">Email</label> <input type="text" value="" name="email"> <label for="password">Password</label> <input type="password" value="" name="password"> <button id="register-user">Click to register</button> </form>
Then create an empty file called: view.ajax.php and upload it to YOUR_SITE_HOME/components/com_content/views/article folder Add the php code below into this file:
<?php /** * @copyright Copyright (C) 2005 - 2014 Open Source Matters, Inc. All rights reserved. * @license GNU General Public License version 2 or later; see LICENSE.txt */ defined('_JEXEC') or die; /** * HTML Article View class for the Content component * * @package Joomla.Site * @subpackage com_content * @since 1.5 */ class ContentViewArticle extends JViewLegacy { function display($tpl = null) { $task = JRequest::getString('task'); switch( $task ){ case "registerNewUser": $this->_registerNewUser( JFactory::getApplication()->input->post->get('form', NULL, 'ARRAY') ); break; } jexit(); } public function _registerNewUser( $form ){ $username = $form[0]['value']; $email = $form[1]['value']; $password = $form[2]['value']; $result = $this->_getNewAccount( $username, $email, $password ); $result = is_int($result) ? $result : 0; //int - new user is registered, we've got its ID //false - user exists with this login or email echo json_encode( array('userId' => $result) ); jexit(); } public function _getNewAccount( $username, $email, $password ){ JModelLegacy::addIncludePath(JPATH_SITE . '/components/com_users/models', 'UsersModel'); $model = JModelLegacy::getInstance('Registration', 'UsersModel', array('ignore_request' => true)); $data = array( 'name' => $username, 'username' => $username, 'password1' => $password, 'password2' => $password, 'email1' => $email, 'email2' => $email ); return $model->register($data); } } ?> Then create a java script file with this JS script and add it to your page HEADER or just add it to your article php source: <script> jQuery(document).ready(function(){ jQuery('#register-user').click(function(e){ e.preventDefault(); form = jQuery('#userForm'); jQuery.ajax({ url: 'index.php?option=com_content&format=ajax&lang=en&view=article&task=registerNewUser&tmpl=component', type: 'post', data: { form: jQuery(form).serializeArray() }, async: true, success: function(response){ var result = jQuery.parseJSON(response); if ( result.userId != 0 ) { // new user registered with the returned ID } else { // username or email already exists } } }); }); }); </script>
Sample Register User form:
Click the button above to see how it makes a jQuery Ajax call and registers a new Joomla user.

Joomla Articles