avoid redirect after user registration (Ajax user registration)
Development and Programming
Hi,
I’ve posted previously about this topic but have yet to get anywhere with it really. I am working on a means of registering members using ajax but am yet to get any breakthrough on it.
What I am trying to establish is a way for members to be registered on the frontend without having to navigate to and from success/error messages, but rather for a success message to be delivered to the user on the front end, maybe in a <div> on the same page.
The issue with the current means of frontend registration is that a large number of users will need to be added to the system at any one time and as such it would become incredibly annoying if the user had to wait for a redirect to add the next user each time they successfully submitted the form.
Currently, the most success I have had is to force the browser to redirect to the previous page using
'redirect' => $_SERVER['HTTP_REFERER'],in the mod.member_register.php file.
I have also tried to use the
on_member_register_startand
on_member_registerhooks and calling
$this->EE->extensions->end_script = TRUE;at the end of each, though all that is happening in both cases is that the URL I am directed to after submitting the form is blank.
Has anyone ever tried to submit an ExpressionEngine registration form using Ajax before? If anyone could offer any insights into how this could be done it would be very much appreciated.
I have also considered asking the user responsible for the multiple user account creation to upload a formatted CSV file and for EE to act on it properly, however this could in fact confuse the process and the user in question so ideally I would like to avoid having to do this.
Thank you in advance, Conor
Moved to Development and Programming by Moderator
Hi, tricycleinteractive. This is more of a programming question, moving to the Development forum.
I believe I have heard of people using jQuery to post the data, then, after the data is posted, you look through the return data for the EE error messages. If you don’t find any error messages, then the form submission was successful. If you do find error messages you then grab them and display them to the user. Never tried this though…
@elvicmic
I have been following tutorials which do just that, but for some reason they are breaking down.
http://cwcrawley.co.uk/2010/07/jquery-and-expressionengine-form-processing/ This tutorial seems to be the best one for what I am trying to achieve. I am using firebug to debug and noticed that on the console tab when the jquery.post occurs, it returns an error but not a description. When you copy and paste the location and its parameters a number of errors are thrown back to the user.
It doesn’t seem to recognize the form elements properly I don’t think. When you log the serialized form data using firebug this is the result:
ACT=10&RET;=/&FROM;=&site_id=5&username=test.user&password=testing1&password_confirm=testing1&screen_name=test+user&email=testing@[email protected]&url;=&m_field_id_1=Testing&m_field_id_2=TEST&m_field_id_3=Player&accept_terms=yI am using the correct URL from what I can see as well as the correct Act ID, while in this case the RET value should not matter.
If you post those parameters to the index.php file, the following errors are returned:
The form you submitted contained the following errors You must submit a username Screen Name contains illegal characters You must submit a password You must submit an email address The following field is required: Team name The following field is required: Portal Name The following field is required: Member Type You must click the ‘agree to terms of service’ checkbox
I’m not sure why these errors are coming up as, from what I can see at least, I have included all the correct parameter names.
Any ideas?
I am starting to think that the .serialize method I am using is not formatting the information properly. Also I have tried adding the XID field again to see if that makes any difference but that just seems to be serialized as {XID_HASH} as is not parsed for some reason.
When should the {XID_HASH} value be parsed? I have tried declaring it both as <input type=”hidden” name=”XID” value=”{XID_HASH}” /> and <input type=”hidden” name=”XID” value={XID_HASH} />
but neither are parsed.
I think I may have gotten slightly further. Now when you run the URL with the parameters included, this message is echoed from somewhere:
The URI you submitted has disallowed characters.
I think it has something to do with characters like %. Any way of encoding these properly, or accepting them somewhere?
I was able to get the following code to work:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html >
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Register</title>
[removed][removed]
[removed]
$(document).ready(function() {
$('form').submit(function(e) {
e.preventDefault();
$.post( $(this).attr('action'), $(this).serialize(), function(data, status) {
// If errors
if (data.search(/error/) >= 0) {
var el = $('<ul >').attr('id', 'errors');
$(data).find('li').each(function() {
$(el).append('<li>' + $(this).text() + '</li>');
});
$('#errors').remove();
$('body').append(el);
}
// If no errors, go to return URL
else {
[removed] = $('input[name="RETURN_URL"]');
}
});
});
});
[removed]
</head>
<body>
<form method="post" action="{site_url}">
<fieldset>
<input type="hidden" name="XID" value="{XID_HASH}" />
<input type="hidden" name="ACT" value="11" />
<input type="hidden" name="RETURN_URL" id="RETURN_URL" value="{path="main/create"}" />
<div>
<label for="username">Your Name:</label>
<input name="username" id="username" type="text" maxlength="50" />
</div>
<div>
<label for="email">Email:</label>
<input name="email" id="email" type="text" maxlength="45" />
</div>
<div>
<label for="password">Password:</label>
<input name="password" id="password" type="password" maxlength="40" />
</div>
<div>
<label for="password_confirm">Password (confirm):</label>
<input name="password_confirm" id="password_confirm" type="password" maxlength="40" />
</div>
<div>
<input type="submit" value="Register" />
</div>
</fieldset>
</form>
</body>
</html>The first [removed] part just link to jQuery. The action ID for the member creation is different for me (11) than what it was in that tutorial you linked to.
I’ve written a simple plugin that lets users take advantage of EE security-enabled forms via AJAX. The usage looks like this:
{exp:ajax_form class="Member" method="member_login"}
<form id="loginForm" style="width: 500px;">
<input type='hidden' name='XID' value='{xid}' />
<input type='hidden' name='ACT' value='{action_id}' />
<input type='text' name='username'/>
<input type='password' name='password'/>
<input type='button' value='Login' id="btnLogin"/>
</form>
[removed]
$("#btnLogin").click(function(){
$.post('{post_url}',
$("#loginForm").serializeArray(),
function(data){
if (data.success){
redirect = '{last}';
} else {
reload(true);
}
},"json"
);
});
[removed]
{/exp:ajax_form}The plugin is free, and you can find it here: http://www.mattgilg.com/eeaddons/ajax_forms.zip
The xss protection is killing some of the scripting in the example, but you get the idea. Let me know if you’ve got any questions, I hope this plugin can help.
-Matt
I was able to get the following code to work:
Indeed, this worked for me too! Thank you for sharing!
I think this may be exactly what I’m looking for, but the link above is broken and I can’t find this anywhere? Is it no longer available?
I think this may be exactly what I’m looking for, but the link above is broken and I can’t find this anywhere? Is it no longer available?
http://devot-ee.com/add-ons/secure-ajax-forms
Awesome! Thanks for that David!
We have the same problem that we want to accomplish. Thanks for posting..