0

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(&#039;&#039;); if (!this.value) this.setCustomValidity(this.dataset.validityMessage)" oninput="this.setCustomValidity(&#039;&#039;)" 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? ;)

Sam
  • 440
  • 8
  • 18
  • **https://stackoverflow.com/questions/9713058/send-post-data-using-xmlhttprequest** – ndm Jan 15 '22 at 16:15

0 Answers0