Problema ao enviar um POST a partir de um evento no formulário

[mateuswolff 0]

Estou tentando enviar um post para um web service a partir do momento que o usuário faz uma alteração no ultimo campo do formulário. Porém quando insiro a chamada da função dentro da função que "ouve" o change do campo ela não funciona. 

Quando coloco a chamada da função que faz o post fora da função que ouve o change, o post é feito normalmente para o meu webservice.

Disparei um alert dentro da função do change e ele funciona normalmente. Mas o post não é feito. 
Alguem pode me ajudar?
 

function createCORSRequest(method, url, data) {
        
        var xhr = new XMLHttpRequest();
        
        if ("withCredentials" in xhr) {

            // Check if the XMLHttpRequest object has a "withCredentials" property.
            // "withCredentials" only exists on XMLHTTPRequest2 objects.
            xhr.open(method, url, true);
            xhr.send(data);
            
        } else if (typeof XDomainRequest != "undefined") {

            // Otherwise, check if XDomainRequest.
            // XDomainRequest only exists in IE, and is IE's way of making CORS requests.
            xhr = new XDomainRequest();
            xhr.open(method, url);
            xhr.send(data);
            
        } else {

            // Otherwise, CORS is not supported by the browser.
            xhr = null;

        }
        return xhr;
    }
        
   //essa função está imprimindo
    $(document).ready(function() {
        $( "#phone" ).change(function() {
            //alert( "Handler for .change() called." );
            
            var teste = document.getElementById("firstname").value; //PARA IMPRIMIR ALERT TESTE
    
            alert(teste); //ALERT PARA VERIFICAR SE ENTRA NA FUNCTION
            
            var firstname = document.getElementById("firstname").value;
            var email = document.getElementById("email").value;
            var phone = document.getElementById("phone").value;

            var url = "https://api.hubapi.com/contacts/v1/contact/?hapikey=cfcccd66-ac0e-424c-b270-a01b14ce7508";
            
            var jsonToSend = {
                "properties": [
                    {
                    "property": "email",
                    "value": email
                    },
                    {
                    "property": "firstname",
                    "value": firstname
                    },
                    {
                    "property": "phone",
                    "value": phone
                    }]
                };

            var xhr = createCORSRequest('POST', url, JSON.stringify(jsonToSend));
            if (!xhr) {
            throw new Error('CORS not supported');
            }

        });
    });

 

[Don Benatti 28]

Falando direto do problema eu perguntaria como você sabe que a requisição não está sendo feita? como está testando isso? não vi um callback para a mudança de estado

// antes de xhr.send...
xhr.onreadystatechange = function() {
    if (xhr.readyState == 4) {
        // concluído
        switch (xhr.status) {
            case 200:
                // Tudo certo
                break;
            
            case 403:
                // Acesso negado
                break;
                
            case 404:
                // Não encontrado
                break;
                
            //etc...
        }
    }
};

Citar

a partir do momento que o usuário faz uma alteração no ultimo campo do formulário

Que coisa perigosa isso, são muitas requisições por segundo, é quase deixar alguém fazer um ataque DDoS HTTP flood.

 

Imagino que vai querer enviar os outros campos do formulário na requisição, se sim, sua lógica não está legal ao fazer "$( "#phone" ).change" imaginando que phone vai ser o último campo a ser alterado, mas o que vai acontecer se o usuário alterar phone antes dos outros campos?

[mateuswolff 0]

17 horas atrás, Don Benatti disse:

Falando direto do problema eu perguntaria como você sabe que a requisição não está sendo feita? como está testando isso? não vi um callback para a mudança de estado

// antes de xhr.send...
xhr.onreadystatechange = function() {
    if (xhr.readyState == 4) {
        // concluído
        switch (xhr.status) {
            case 200:
                // Tudo certo
                break;
            
            case 403:
                // Acesso negado
                break;
                
            case 404:
                // Não encontrado
                break;
                
            //etc...
        }
    }
};

Que coisa perigosa isso, são muitas requisições por segundo, é quase deixar alguém fazer um ataque DDoS HTTP flood.

 

Imagino que vai querer enviar os outros campos do formulário na requisição, se sim, sua lógica não está legal ao fazer "$( "#phone" ).change" imaginando que phone vai ser o último campo a ser alterado, mas o que vai acontecer se o usuário alterar phone antes dos outros campos?

 

Sei porque quando retiro ela de dentro da funçao do change os dados chegam no meu webservice, e quando a deixo da forma que está, o alert executa mas os dados não chegam.

 

Em relação à segurança não tenho muito conhecimento sobre mas ainda iria chegar nessa parte. Ainda estou meio que testando as coisas.

 

Há outra coisa que eu possa fazer?

[Don Benatti 28]

6 horas atrás, mateuswolff disse:

Há outra coisa que eu possa fazer?

 

Provavelmente você está recebendo um 400 Bad Request, este servidor api.hubapi.com é seu? os headers estão corretos?

[mateuswolff 0]

Em 16/06/2017 at 06:11, Don Benatti disse:

 

Provavelmente você está recebendo um 400 Bad Request, este servidor api.hubapi.com é seu? os headers estão corretos?

 

Não é meu. Mas não acho que seja isso, pois se tiro o trecho abaixo da função que captura o change, os dados chegam normalmente no servidor que recebo os contatos.

 

 

var firstname = document.getElementById("firstname").value;
            var email = document.getElementById("email").value;
            var phone = document.getElementById("phone").value;

            var url = "https://api.hubapi.com/contacts/v1/contact/?hapikey=cfcccd66-ac0e-424c-b270-a01b14ce7508";
            
            var jsonToSend = {
                "properties": [
                    {
                    "property": "email",
                    "value": email
                    },
                    {
                    "property": "firstname",
                    "value": firstname
                    },
                    {
                    "property": "phone",
                    "value": phone
                    }]
                };

            var xhr = createCORSRequest('POST', url, JSON.stringify(jsonToSend));
            if (!xhr) {
            throw new Error('CORS not supported');
            }

[Don Benatti 28]

8 horas atrás, mateuswolff disse:

se tiro o trecho abaixo da função que captura o change, os dados chegam normalmente no servidor

 

Você acabou de solucionar seu próprio post!

Devia ter mencionado isso antes, é como ir no médico e não falar o que está sentindo.

Duas coisas, veja se o evento change está sendo capturado, colocando um console.log, alert, etc; depois se sim, o problema é porque você está sendo bloqueado por fazer muitas requisições, o evento change faz muitas, como o nome já diz.

[mateuswolff 0]

Em 18/06/2017 at 08:01, Don Benatti disse:

 

Você acabou de solucionar seu próprio post!

Devia ter mencionado isso antes, é como ir no médico e não falar o que está sentindo.

Duas coisas, veja se o evento change está sendo capturado, colocando um console.log, alert, etc; depois se sim, o problema é porque você está sendo bloqueado por fazer muitas requisições, o evento change faz muitas, como o nome já diz.

 

Eu falei isso sim lá na primeira pergunta que fiz. Falei tb que coloquei um alert pra testar, que está sendo disparado normalmente.

 

Então se o alert funciona, a requisição não vai por causa do evento Change? Acha que se mudasse para o Blur resolveria? ou como poderia fazer se não fosse assim?

 

Valeu

[Pita 53]

Olá, nesses casos que tem envio de dados para o servidor, não gosto de usar o "change" pq qualquer coisa ele faz o envio dos dados, o que eu prefiro é o evento "blur", assim o usuário altera o quanto quiser e só faz a requisição uma vez que é quando o input perder o foco