I'm trying to update some checkbox fields through the frontend with ajax. After clicking / change of the checkbox the form needs to update the profile.
Template code:
<form class="form-horizontal form-ajax" method="POST" action="" accept-charset="UTF-8" id="notificaties">
{{ getCsrfInput() }}
<input type="hidden" name="action" value="/users/saveUser">
<input type="hidden" name="redirect_" value="account">
<input type="hidden" name="userId" value="{{ user.id }}">
<ul class="action-list">
<li>
<p>
Ontvang updates over leuke nieuwe producten
<span class="pull-right">
<input type="hidden" name="fields[emailUpdates]" value="0">
<input class="ajaxcheck" type="checkbox" id="fields_emailUpdates" name="fields[emailUpdates]" value="1" {% if user is defined and user.emailUpdates %} checked="checked"{% endif %}>
</span>
</p>
</li>
<li>
<p>
Ontvang email updates over geinteresseerde kopers
<span class="pull-right">
<input type="hidden" name="fields[emailReactie]" value="0">
<input class="ajaxcheck" type="checkbox" id="fields_emailReactie" name="fields[emailReactie]" value="1" {% if user is defined and user.emailReactie %} checked="checked"{% endif %}>
</span>
</p>
</li>
<li>
<p>
Ontvang wekelijks een upate over de producten van jou favoriete verkopers
<span class="pull-right">
<input type="hidden" name="fields[emailFavorieten]" value="0">
<input class="ajaxcheck" type="checkbox" id="fields_emailFavorieten" name="fields[emailFavorieten]" value="1" {% if user is defined and user.emailFavorieten %} checked="checked"{% endif %}>
</span>
</p>
</li>
<li>
<p>
Ontvang email updates van de reacties van jou producten
<span class="pull-right">
<input type="hidden" name="fields[emailComments]" value="0">
<input class="ajaxcheck" type="checkbox" id="fields_emailComments" name="fields[emailComments]" value="1" {% if user is defined and user.emailComments %} checked="checked"{% endif %}>
</span>
</p>
</li>
</ul>
</form>
JS code:
$(".ajaxcheck").click(function(){
var data = $(this).parents('form').serialize()
$.ajax({
context: this,
method: "POST",
dataType: "json",
url: "/actions/users/saveUser",
success: function(data, response){
$(this).parents('.account-item').remove();
console.log("success", response, data);
}
});
});
But it gives me an error: GET http://shop.craft.dev/actions/users/saveUser 400 (Bad Request)
The form gets updated. So it works. But it still gives me this error:
In my craft.log file:
exception.Craft\HttpException.400 Message exception 'Craft\HttpException' in /Volumes/HDD Drive/Sites/Shop/app/controllers/BaseController.php:191
exception.Craft\HttpException.400
). Please update your question with any additional details on the error.