devot:eeDevoted to ExpressionEngine

This add-on has been designed to be fully compatible with AJAX Captcha  and AJAX Form Validator.

THE TAG exp:ajax_registration:form

I. Parameters

1) form_id - optional. Allows you to specify HTML id attribute of the form. Default value is “ajax_registration_form”.

2) name - optional. Allows you to specify HTML name attribute of the form. Default value is “ajax_registration_form”.

3) submit_button_id - required. Allows you to specify HTML id attribute
of the submit button of the form.

4) error_message_container_id - optional. Allows you to specify HTML id attribute of the element inside which
error messages will be be displayed.

5) error_message_container_class - optional. Allows you to specify HTML class attribute of the element inside which
error messages will be be displayed.

6) success_message_container_id - optional. Allows you to specify HTML id attribute of the element inside which
success messages will be be displayed.

7) success_message_container_class - optional. Allows you to specify HTML class attribute of the element inside which success messages will be be displayed.

8) process_indicator_id - optional. Allows you to specify HTML id attribute of the element which
will act as the indicator of the login form submission being processed.

9) process_indicator_class - optional. Allows you to specify HTML class attribute of the element which
will act as the indicator of the login form submission being processed.

10) process_indicator_scroll - optional. Allows you to specify if HTML element
which acts as the indicator of registration being processed by AJAX should be scrolled into
view (value “yes”) or not (value “no”). Default is “no”.

11) message_scroll - optional. Allows you to specify if error and success messages should be scrolled into
view (value “yes”) or not (value “no”). Default is “no”.

12) clean_form_after_success - optional. Allows you to specify if after successful registration the values of
the form fields should be cleaned. Possible values are “yes” and “no”. Default is “yes”.

13) add_callback_success - optional. Allows you to specify name of javascript function
which will be executed after successful submission of the form. This parameter supports pipe
operator, i.e. you can specify several names of javascript functions.

14) add_callback_failure - optional. Allows you to specify name of javascript function
which will be executed after unsuccessful submission of the form. This parameter supports pipe
operator, i.e. you can specify several names of javascript functions.

15) add_callback_success_args - optional. Allows you to specify argument of javascript function
which will be executed after successful submission of the form. This parameter supports pipe
operator, i.e. you can specify arguments of several javascript functions. The order of arguments
should follow the order of functions in “add_callback_success” parameter. If some functions should
have arguments and other functions don’t, specify “null” or “0” (without quotation marks) as arguments
for te latter.

16) add_callback_failure_args - optional. Allows you to specify argument of javascript function
which will be executed after unsuccessful submission of the form. This parameter supports pipe
operator, i.e. you can specify arguments of several javascript functions. The order of arguments
should follow the order of functions in “add_callback_failure” parameter. If some functions should
have arguments and other functions don’t, specify “null” or “0” (without quotation marks) as arguments
for te latter.

II. Single variables

1) ajax_registration_registered - outputs “yes” in case current user is already registered and “no”
in case current user isn’t registered. Used primarily in conditional to hide registration form for
registered users.

2) ajax_registration_allowed - outputs “yes” in case registration is allowed and “no” in case registration
not allowed.

3) ajax_registration_error_message - outputs error messages.

III. Displaying custom profile fields

You can add HTML of the custom profile fields into registration form manually, but you can do it easier
by using variable pairs.

The code of the custom fields must be wrapped with the variable pair
{ajax_registration_custom_fields}{/ajax_registration_custom_fields}

Inside this variable pair three other variable pairs can be used

1) ajax_registration_text - wraps the code of the text field.

2) ajax_registration_textarea - wraps the code of the textarea field.

3) ajax_registration_select - wraps the code of the selectbox field.

Inside these three variable pairs following single variables can be used:

1) ajax_registration_field_id - field id number.

2) ajax_registration_field_name - HTML name attribute of the form field.

3) ajax_registration_field_label - label of the form field.

4) ajax_registration_field_ta_rows - number of textarea rows.

5) ajax_registration_field_maxlength - max length of the form field.

6) ajax_registration_field_width - width of the form field.

7) ajax_registration_field_search - is field serachable or not.

8) ajax_registration_required_field - outputs “yes” in case field is required and “no” otherwise.

9) ajax_registration_field_format - how ExpressionEngine should format field data.

10) ajax_registration_field_description - description of the form field.

11) ajax_registration_options - outputs HTML of the option elements of selectbox field.

IV. Usage example

<html>
<head>

<title>AJAX Registration demo</title>

<style>

table td {
width: 35em;
vertical-align: top;
}

div.indicator  {
display: none;
}

.registration_error {
border: solid 1px red;
min-height: 7em;
width: 35em;
display: block!important;
}

.registration_success {
border: solid 1px green;
min-height: 7em;
width: 35em;
display: block!important;
}

.registration_process {
border: solid 1px green;
background-image: url({site_url}{globalvar_interface_images_uri}ajax-loader.gif);
background-repeat: no-repeat;
background-position: center;
min-height: 7em;
width: 35em;
text-align: center;
display: block!important;
}

</style>

</head>

<body>

<h1>AJAX Registration</h1>

<p>This add-on allows to display member registration form and forgot password form in ExpressionEngine's templates and submit them without reloading of the page.</p>

<table>
<tr>
<td>

<h2>Member registration</h2>

{exp:ajax_registration:form submit_button_id="ajax_registration_submit_button" error_message_container_id="error_message" error_message_container_class="registration_error" success_message_container_id="success_message" success_message_container_class="registration_success" process_indicator_id="process_indicator" process_indicator_class="registration_process" process_indicator_scroll="yes" message_scroll="yes"}

<div id="error_message" class="indicator{if ajax_registration_error_message != ""} registration_error{/if}">
<h3 style="margin-bottom: 1em; color: #cc3300;">Error occurred:</h3>
{ajax_registration_error_message}
</div>

<div id="success_message" class="indicator">
<h3 style="margin-bottom: 1em; color: green">Success!</h3>
</div>

<div id="process_indicator" class="indicator">
<h3>Registering member…</h3>
</div>

{if ajax_registration_registered  == "no"}

<p>*Username:<br>
<input type="text" name="username" />
</p>

<p>*Screen name:<br>
<input type="text" name="screen_name" />
</p>

<p>*Password:<br>
<input type="password" name="password" />
</p>

<p>*Confirm password:<br>
<input type="password" name="password_confirm" />
</p>

<p>*Email:<br>
<input type="text" name="email" />
</p>

{ajax_registration_custom_fields}

{ajax_registration_text}
<p>{if ajax_registration_required_field == "yes"}*{/if}{ajax_registration_field_label}:<br>
<input type="text" name="{ajax_registration_field_name}" width="{ajax_registration_field_width}" maxlength="{ajax_registration_field_maxlength}" />
</p>
{/ajax_registration_text}

{ajax_registration_textarea}
<p>{if ajax_registration_required_field == "yes"}*{/if}{ajax_registration_field_label}:<br>
</p>
<textarea name="{ajax_registration_field_name}" rows="{ajax_registration_field_ta_rows}"></textarea>
{/ajax_registration_textarea}

{ajax_registration_select}
<p>{if ajax_registration_required_field == "yes"}*{/if}{ajax_registration_field_label}:<br>
<select name="{ajax_registration_field_name}">{ajax_registration_options}</select>
</p>
{/ajax_registration_select}

{/ajax_registration_custom_fields}

{if captcha}
<p>{captcha}</p>
<p>*Enter the characters you see above:<br>
<input type="text" name="captcha" /></p>
{/if}

<p><input type="checkbox" value="y" name="accept_terms" />*I agree to the terms of service</p>

<input type="submit" id="ajax_registration_submit_button" value="Submit" />

{/if}{!-- End of if ajax_registration_registered  == 'no' --}

{/exp:ajax_registration:form}

</td>

</tr>
</table>

</body>
</html>

THE TAG exp:ajax_registration:forgot_password

I. Parameters

This tag has the same parameters as exp:ajax_registration:form tag, but certain parameters have other default values.
Default value for parameter “form_id” is “ajax_registration_forgotpass_form”; default value for parameter “name” is “ajax_registration_forgotpass_form”.

II. Single variables

1) ajax_registration_registered - outputs “yes” in case current user is already registered and “no”
in case current user isn’t registered. Used primarily in conditional to hide registration form for
registered users.

2) ajax_registration_error_message - outputs error messages.

III. Usage example

<html>
<head>

<title>AJAX Registration demo</title>

<style>

table td {
width: 35em;
vertical-align: top;
}

div.indicator  {
display: none;
}

.registration_error {
border: solid 1px red;
min-height: 7em;
width: 35em;
display: block!important;
}

.registration_success {
border: solid 1px green;
min-height: 7em;
width: 35em;
display: block!important;
}

.registration_process {
border: solid 1px green;
background-image: url({site_url}{globalvar_interface_images_uri}ajax-loader.gif);
background-repeat: no-repeat;
background-position: center;
min-height: 7em;
width: 35em;
text-align: center;
display: block!important;
}

</style>

</head>

<body>

<h1>AJAX Registration demo</h1>

<p>This add-on allows to display member registration form and forgot password form in ExpressionEngine's templates and submit them without reloading of the page.</p>

<table>
<tr>

<td>
<h2>Forgot password?</h2>

{exp:ajax_registration:forgot_password submit_button_id="ajax_registration_forgotpass_submit_button" error_message_container_id="error_message_forgotpass" error_message_container_class="registration_error" success_message_container_id="success_message_forgotpass" success_message_container_class="registration_success" process_indicator_id="process_indicator_forgotpass" process_indicator_class="registration_process" process_indicator_scroll="yes" message_scroll="yes"}

<div id="error_message_forgotpass" class="indicator{if ajax_registration_error_message != ""} registration_error{/if}">
<h3 style="margin-bottom: 1em; color: #cc3300;">Error occurred:</h3>
{ajax_registration_error_message}
</div>

<div id="success_message_forgotpass" class="indicator">
<h3 style="margin-bottom: 1em; color: green">Success!</h3>
</div>

<div id="process_indicator_forgotpass" class="indicator">
<h3>Retrieving password…</h3>
</div>

{if ajax_registration_registered  == "no"}

<p>Enter your email address:<br>
<input type="text" name="email"/></p>
<input type="submit" id="ajax_registration_forgotpass_submit_button" value="Submit"/>

{/if}{!-- End of if ajax_registration_registered  == 'no' --}

{/exp:ajax_registration:forgot_password}
</td>


</tr>
</table>

</body>
</html>