How can I get HTMLFormElement using this inside event?

Question

I'm trying to create an AJAX form using XHR.

The code looks like:

    body.on('click','.ajax-form', function (e) {
    e.preventDefault();

    document.getElementById('loader').style.display = 'block';

    let xhr = new XMLHttpRequest();
    let form = $(this);
    let formAction = form.data('route');
    let formData = new FormData(form);

    xhr.open('POST', formAction);

    xhr.addEventListener("load", loadHandler);
    xhr.addEventListener("error", errorHandler);

    function loadHandler() {
        let jsonResponse = JSON.parse(xhr.responseText);

        document.getElementById('loader').style.display = 'none';

        if (jsonResponse.target) {
            document.getElementById(jsonResponse.target).innerHTML = window.atob(jsonResponse.view);
            $('#modal').modal('show');
        }
        if (jsonResponse.message) {
            document.getElementById('toast-body').innerHTML = jsonResponse.message;
            $('.modal-backdrop').remove();
            $('#modal').modal('hide');
            $('.toast').toast('show');
            $(function () { $('.rateit').rateit()});
        }
    }

    function errorHandler() {
        document.getElementById('loader').style.display = 'none';
        // request error
        console.log('HTTP error', xhr.status, xhr.statusText);
    }

    // start request
    xhr.send(formData);
});

In this format i get the error: Uncaught TypeError: Failed to construct 'FormData': parameter 1 is not of type 'HTMLFormElement'.

How can I get the HTMLFormElement using this (jQuery or not, I would prefer without jQuery). I searched for hours but couldn't find a solution.

If the `.ajax-form` is the form, just reference it (the `this`) again, rather than wrapping it in a jQuery object — CertainPerformance, Aug 03 '19 at 08:33
thank you for your answer. If I refrence it with "this" I can't get the form data attribute ((index):375 Uncaught TypeError: form.data is not a function). — Andrew Starlike, Aug 03 '19 at 08:36
Is the route in the data attribute? Then reference `this.dataset.route` to get the route — CertainPerformance, Aug 03 '19 at 08:40

How can I get HTMLFormElement using this inside event?

0 Answers0