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.