Ajax how to send data from a form?

Question

JavaScript

Good afternoon, I've reached asynchronous js, in particular, I'm interested in sending data from a form.
There is a simple form:

<form action="#" name="form" method="POST">
        <input type="text" name="name" value="blalba">
        <input type="email" name="email" value="[email protected]">
        <input type="tel" name="phone" value="34343">
        <button type='submit'>отправить</button>
    </form>

and wrote a script:

let sendingStatus = {
    sending: 'отправка...',
    sent: "отправлено",
    fail: "Что то пошло не так...."
}



let form = document.forms.form,
input= form.querySelectorAll('input'),
statusMessage = document.createElement('div');
statusMessage.classList.add('status');

form.addEventListener('submit',(event)=>{
     event.preventDefault();
    form.append(statusMessage);
   
    let xhr = new XMLHttpRequest();
    xhr.open("POST", "form/mail.php",true);
    xhr.setRequestHeader('Content-type', 'application/x-www-form-urlencoded');
    let formData = new FormData(form);
     xhr.send(formData);
    xhr.onreadystatechange=()=>{
        if(xhr.readyState<4){
            statusMessage.innerHTML=sendingStatus.sending;
        }else if(xhr.readyState===4){
            if(xhr.status == 200 && xhr.status<300){
                statusMessage.innerHTML=sendingStatus.sent;
                for(let i of input){
                    i.value='';
                }
            }else statusMessage.innerHTML=sendingStatus.fail;
        }
    };
 });

The code works, but the data is not taken from the form, the form comes without data. Do not tell me how to transfer from?
Thank you.

Answer 1

Ran your code, it looks like the form data is being submitted.
PS: If you use arrow functions, why not use modern fetch, async/await?