Recently, I decided to program in Vanilla JS instead of jQuery. In my AJAX call, I managed to connect with the server via objXMLHttpRequest, but I can't figure out how I could pass parameters with it. Here's one of my attempts:
HTML
This is a form created with CakePHP4's HTML helper:
<form enctype="multipart/form-data" method="post" accept-charset="utf-8" class="form" novalidate="novalidate" action="/articles/edit/25">
<div style="display:none;">
<input type="hidden" name="_method" value="PUT"/><input type="hidden" name="_csrfToken" autocomplete="off" value="mY7sKbytEXL+JHl3eGaRSIJ12VkWFEMbBmbC1fg7dNhmYIG79IwCYiUL2lIhQl/HfB5SrI0fbe5cbjU/AD96iTebLmIngwJn5EzgPCJ2In8yXvLjywJBvV9Zt43EuWMHFDPqNkckaKNLfGea7HxZ2Q=="/>
</div>
<fieldset class="form__fieldset">
<div class="form__row form__row--input">
<label class="form__label" for="name">Title</label>
<input type="text" name="name" class="form__input-text" required="required" data-validity-message="This field cannot be left empty" oninvalid="this.setCustomValidity(''); if (!this.value) this.setCustomValidity(this.dataset.validityMessage)" oninput="this.setCustomValidity('')" id="name" aria-required="true" value="Artikel 25 - Proin varius iaculis dictum" maxlength="225"/>
</div>
</fieldset>
<button class="button button--default button--icon button--save" typ="submit" type="submit"><span class="button__text-wrapper"><span class="button__text">Save</span></span></button>
</form>
Vanilla JS
function calledWithEventHandler() {
let inputName = document.getElementById('name').value;
let params = "name=" + inputName;
let objXMLHttpRequest = new XMLHttpRequest();
objXMLHttpRequest.onreadystatechange = function() {
if(objXMLHttpRequest.readyState === 1) {
objXMLHttpRequest.setRequestHeader('X-CSRF-Token', crsfToken);
}
if(objXMLHttpRequest.readyState === 4) {
if(objXMLHttpRequest.status === 200) {
console.log(objXMLHttpRequest.responseText);
} else {
console.log('Error code: ' + objXMLHttpRequest.status);
console.log('Error message: ' + objXMLHttpRequest.statusText);
}
}
}
objXMLHttpRequest.open('POST', '<?= $this->Url->build(['controller' => 'articles', 'action' => 'getSlug']) ?>');
objXMLHttpRequest.send(params);
}
PHP
This is my action (method) inside my CakePHP4 controller that is called:
public function getSlug() {
$name = $this->request->getData('name');
echo $name;
die();
}
I'm already struggling the whole day with this. Is there someone who can give me a clue please? ;)