I want to use the ajax capability of not refreshing the page or rerouting the user to the registration page. Login / Register dialogue modals have been created. I have the login javascript ajax working perfectly using an ajax call to the login api without any configurations or added modules. I want to integrate the registration form in the same way. I would like the registration to:
- show in a modal - this works.
- Submit javascript code works with preventDefault
- response is failing.
Ajax Post is returning '<' obviously this is returning some html. How do I know how to pass the data in the ajax call and what to expect as a response? My example below:
<style>
.scroll {
//background-color: #fed9ff;
//width: 600px;
height: 500px;
overflow-x: hidden;
overflow-y: auto;
//text-align: center;
//padding: 20px;
}
.close {
margin: 10px 25px 0px;
}
#log-title {
margin-left:25px;
}
</style>
<a data-target="#register-modal" data-toggle="modal" class="" id="" href="#register-modal">Register / Create an Account </a>
<div id="overlay_container"></div>
<!-- Register to download button so stays on same page. -->
<div id="register-modal" class="modal" tabindex="-1" role="dialog" aria-hidden="true">
<button type="button" class="close" data-dismiss="modal" aria-label="Close">
<span aria-hidden="true">×</span>
</button>
<h3 id="log-title">Please register:</h3>
<div class="modal-dialog">
<div class="modal-content scroll">
<?php
$register_form = \Drupal::service('entity.form_builder')->getForm(\Drupal\user\Entity\User::create([]), 'register', []);
// Load the service renderer
$render = Drupal::service('renderer');
$rform = $render->renderPlain($register_form);
echo $rform;
?>
</div> <!-- Register modal content end-->
</div><!-- Register modal-dialog end -->
</div><!-- Register modal end -->
<script>
var registerForm = document.getElementById('user-register-form');
if (registerForm ) {
// capture registration submit, prevent from submission and use ajax to get response
registerForm.onsubmit = async (e) => {
e.preventDefault();
// callRegCaptcha();
elms =document.getElementById("user-register-form").elements;
var url = "https://website/user/register"; //website is a true url
fetch(url, {
method: 'POST',
body: elms
})
.then(response=>response.json())
.then(json => {
console.log(json);
});
}
}
</script>
Everything is working except the response. I cant find anywhere what to expect as a response. Or if Im binding the data of elms correctly. Can anyone help me in this area?
The login required a csrfToken to be passed along with
headers: {
'Content-Type': 'application/json',
'X-CSRF-Token': csrfToken
},
and "?_format=json" appended to the url but for the registration values I am running blindly. Does anyone have any information on what to pass? The response I get is the html page.
Lastly, the Registration has a captcha v2 which outputs the error: "The answer you entered for the CAPTCHA was not correct"
I also looked at this page: https://www.drupal.org/node/2405657
Showing the #Register
POST: https://example.com/user/register?_format=json
Content-type: application/json
{
"name": { "value": "fooBar" },
"mail": { "value": "[email protected]" },
"pass": { "value": "secretSauce" }
}
200 OK
I dont get a json response, it returns the syntax error: unexpected token < in JSON at position 1.
fetch(url, {
method: 'POST',
data: JSON.stringify({
"name": { "value": "fooBar" },
"mail": { "value": "[email protected]" },
"pass": { "value": "secretSauce" }
}),
dataType: "json",
contentType: "application/json; charset=utf-8",
success: function(data) {
console.log(data);
successmessage = 'Data was succesfully captured';
$("#overlay_container").text(successmessage);
},
error: function(data) {
console.log(data);
successmessage = 'Error';
$("#overlay_container").text(successmessage);
}
})
.then(response=>response.json())
.then(json=> {
console.log(json);
}).catch(function(err) {
console.log(err); // shows the above exception
});
None of the success: or error is responding, just the catch
Further more, when the _format=json to the url, the following error is reported:
{message: 'Not acceptable format: json'}
message: "Not acceptable format: json"
[[Prototype]]: Object
Next, I have tried to follow this posts response by @Fons Vandamme of installing Rest UI and configuring the user registration
message: "No user account data for registration received."
[[Prototype]]: Object
Next: under admin extend, changed the authentication from cookies to basic authentication by installing the HTTP basic authentication, navigating to the rest UI configuration for the User registration /user/register: POST and the new error is a 400 Bad Request.
