6

I have a user registration form on the front-end of a site that is working well as a standard form, but when I try to use ajax submission, I'm getting an HTML response rather than JSON.

Here's the javascript I'm using

$('#register-form').submit(function(ev) {
    ev.preventDefault();

    var data = $(this).serialize();

    $.post('/', data, function(response) {

        console.log(response);

        if (response.success) {
            alert("success")
        } else {
            alert(response.error);
        }
    });
});

And this is my form code:

<form method="post" action="" id="register-form" accept-charset="UTF-8">
{{ getCsrfInput() }}
<input type="hidden" name="action" value="users/saveUser">

<h3>Create An Account</h3>
<p>By creating an account, you will be able to save your application progress. This is an optional step.</p>

<div class="row">
    <label for="email" class="col-sm-3 control-label">Email</label>
    <input type="text" class="form-control" id="email" name="email" {%- if account is defined %} value="{{ account.email }}"{% endif %}>
</div>

<div class="row">
    <div class="form-group col-6">
        <label for="password">Password</label>
        <input id="password" class="form-control" type="password" name="password">
    </div>

    <div class="form-group col-6">
        <label for="password2">Confirm Password</label>
        <input id="password2" class="form-control" type="password" name="password2">
    </div>
</div>

<div class="actions">
    <p><input type="submit" id="form-submit" value="Register" class="btn btn-grey"/></p>
</div>

<span class="center">Already have an account? <a href="#" id="sign-in-form-btn">Sign In</a></span>

The response var is returning the entire html page rather than JSON data.

Is there a way to trigger a JSON response for the registration form?

Note, I'm able to use similar code for a front-end login form and it's working well.

5

EDIT

Craft 2.4 is now available, and the users/saveUser action will now return a JSON response for AJAX requests.

The original answer is still valid for <2.4 builds:

No, there's no way to trigger a JSON response for the users/saveUser action.

Other UsersController actions (such as users/login do return JSON for AJAX requests, so it might be an idea to submit this as a feature request – as a consistency measure, if nothing else.

For now, here's a couple of ideas for workarounds:

  1. Write a plugin with a controller that wraps the UsersController->actionSaveUser() method somehow, or implements its own action (you could basically just copy paste the whole actionSaveUser() from the core UsersController, changing it to return some JSON at the end).

  2. You can set the redirect parameter (using a hidden input field in your form) to point to a template where you build the JSON yourself.

Form:

<form method="post" action="" id="register-form" accept-charset="UTF-8">
     <!-- Your form code -->
     <input type="hidden" name="redirect" value="{{ url( 'path/to/your/template/or/a/route' }}">
</form>

Template for the redirect (notice the JSON header):

{% header "Content-Type: application/json" %}
{
    "success" : {{ account is defined and account.id ? true : false }}
}
  • Thanks for the quick response. I just added the feature request, and will give this a shot in the meantime. Cheers. – Coppa Mar 28 '15 at 20:51
  • Nice – would be great if you'd give an update if/when you get it working; the above are just ideas and the JSON thing may or may not work as-is. It would be great to have a solid answer for other users having the same issue in the future. – Mats Mikkel Rummelhoff Mar 28 '15 at 20:55
  • 1
    I tried the redirect route, but I wasn't able to output meaningful error message because actionSaveUser() only calls the redirect on successful user creation. So I have some front-end validation in place now to test basic input errors. I did add a redirect to a JSON page, and since it only redirects on success, I'm just returning "success" from this page by default. Then if I don't see the success var (which I won't on error as it returns the whole index page) then I can assume there was an error. At this point the error is most likely due to a duplicate email address or invalid password. – Coppa Mar 31 '15 at 4:08

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service, privacy policy and cookie policy

Not the answer you're looking for? Browse other questions tagged or ask your own question.