Xmlhttprequest cannot find run

Question

I can’t find the error where Xmlhttprequest is, but I made an Alert to see how far it plays.

JS

window.onload = () => {
    //Constantes que são pegas do Formulário
    const name = document.getElementById('name');
    const mail = document.getElementById('mail');
    const message = document.getElementById('message');
    const sendMessage = document.getElementById('sendMessage');
    const regex = /[a-z0-9!#$%&'*+/=?^_`{|}~-]+(?:\.[a-z0-9!#$%&'*+/=?^_`{|}~-]+)*@(?:[a-z0-9](?:[a-z0-9-]*[a-z0-9])?\.)+[a-z0-9](?:[a-z0-9-]*[a-z0-9])?/
    sendMessage.addEventListener('click', (e) => {

        //Validação de Nome
        if (name.value == undefined || name.value == "" || name.value == null) {
            alert('Nome não corresponde com o campo');
            name.focus();
            e.preventDefault();
        }
        //Validação de E-mail
        if (regex.test(!mail.value) || mail.value == "" || mail.value == undefined || mail.value == null) {
            alert('E-mail não corresponde com o campo');
            mail.focus();
            e.preventDefault();
        }
        //Validação de mensagem
        if (message.value == undefined || message.value == "" || message.value == undefined ){
            alert('Mensagem não corresponde com o campo');
            message.focus();
            e.preventDefault();
        //Se todas as condições forem aprovadas então vai enviar as informações do e-mail e o regex
        //para o mail.php
        } else {
            //Criando objeto XMLHttpRequest
            var search = new XMLHttpRequest()
            var method = 'POST';
            var url = '../php/mail.php'
            search.open(
                method,
                url,
            )
           alert('Até aqui executa');
           /* Essa linha não executa*/
             search.onreadystatechange = () => {
                if(search.readyState == XMLHttpRequest.DONE && search.status === 200) {
                    alert('E-mail enviado com sucesso!');
                    sendMessage.style.display = "none";
                    var dados = JSON.parse(mail,regex)
                    search.send(dados)
                }
           //Nem essa linha executa
                else {
                    e.preventDefault()
                    alert("Ocorreu um erro! Envie novamente");
                }
            }
        }
    });

}

I looked here at Stackoverflow if I had any similar case and did not find.

Answer 1

The method onreadystatechange identifies the change of the request status. So, especially in your code, you should not call the method send inside the block onreadystatechange.

Put it like this:

           // ...
           //alert('Até aqui executa');
           /* Essa linha não executa*/
             search.onreadystatechange = () => {
                if(search.readyState == XMLHttpRequest.DONE && search.status === 200) {
                    alert('E-mail enviado com sucesso!');
                    sendMessage.style.display = "none";
                    var dados = JSON.parse(mail,regex)
                }
           //Nem essa linha executa
                else {
                    e.preventDefault()
                    alert("Ocorreu um erro! Envie novamente");
                }
            }
            search.send(dados)
        }
    });

}

There are cases where we use the method send inside the block readystatechange. But that would be for a new request after this response. What is not [seems to be] your case.

Recommended reading: MDN: Xmlhttprequest.readyState and readystatechange