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'.
<![CDATA[
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:
<![CDATA[
<?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:
<![CDATA[
<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
