0

Estou com um problema em um projeto de faculdade.

Gostaria de saber como faço para rodar esse script Ajax automaticamente:

<script type="text/javascript">
function buscaCep() {
    var cep = $( "#cep" ).val();

    var infos = {
        'iCep': cep
    };

    $.ajax( {
        crossDomain: true,
        type: "POST",
        url: "",
        data: infos
    } ).done( function ( data ) {
        var json = $.parseJSON( data );
        $( "#log" ).val( json.lograd );
        $( "#cidade" ).val( json.cidade );
        $( "#bairro" ).val( json.bairro );
        $( "#estado" ).val( json.estado );
    } );
}

Após o usuário preencher um input:

<input type="text" name="cep" id="cep" onkeyup="maskIt(this,event,'#####-###')"/>

3 Respostas 3

2

Se eu entendi você quer executar após preencher o "formato correto", ou seja se preencher errado (incluindo a mascara) deve checar o conteúdo do que foi digitado

No caso usar onfocusout ou onblur apenas pode conflitar com o tempo de execução da mascara, por exemplo se digitou errado e tirar o foco do campo o ajax iria executar de qualquer forma, então para evitar isto você pode usar uma regex com .test() na string, assim:

<input type="text" name="cep" id="cep" onkeyup="maskIt(this,event,'#####-###')" onblur="buscaCep()"/>

E no JS assim:

function buscaCep() {
    var cep = $( "#cep" ).val();

    //Se o formato for inválido ele executa o "return"
    if (!/^\d{5}-\d{3}$/.test(cep)) return;

    var infos = {
        'iCep': cep
    };

    $.ajax( {
        crossDomain: true,
        type: "POST",
        url: "",
        data: infos
    } ).done( function ( data ) {
        var json = $.parseJSON( data );
        $( "#log" ).val( json.lograd );
        $( "#cidade" ).val( json.cidade );
        $( "#bairro" ).val( json.bairro );
        $( "#estado" ).val( json.estado );
    } );
}

Como funciona a expressão regular

A (expressão regular) no caso especifico funciona assim:

^\d{5}-\d{3}$
^ ^   ^     ^
. .   .     .
. .   .     ... Deve terminar exatamente com a expressão anterior
. .   .     
. .   ... Deve conter um hífen entre ambos números
. .
. ... \d indica que deve ser um numero e o {5} indica que deve
.      conter 5 numeros (no outro {3} indica que deve conter 3 numeros)
.
... Indica que deve começar exatamente com a proxima expressão
1
  • 1
    Obrigado pelo código ajudou muito! Commented 16/04/2018 às 19:36
1

Você pode usar o evento onblur de forma semelhante a que você usou o onkeyup.

Exemplo:

<input type="text" name="cep" id="cep" onkeyup="maskIt(this,event,'#####-###')" onblur="buscaCep()"/>

O evento onblur é disparado quando o campo input perder o foco

2
  • Obrigado pela solução! Ajudou muito. Commented 16/04/2018 às 15:32
  • Se resolveu o seu problema aceite a resposta para a pergunta e/ou vote positivamente na resposta Commented 16/04/2018 às 15:34
1

Há várias possibilidades nesse caso, uma delas seria utilizar o evento onfocusout, ou seja, após o usuário preencher o campo e tirar o foco do mesmo, a função será executada.

<input type="text" name="cep" id="cep" onkeyup="maskIt(this,event,'#####-###')" onfocusout="buscaCep()" />
2
  • Obrigado pela solução! Ajudou muito. Commented 16/04/2018 às 15:32
  • @VinniciusGomes Se a resposta ajudou a solucionar o seu problema, aceite a resposta para a pergunta (sinal de correto, parecido com um "V" ao lado da resposta) e/ou vote positivamente na resposta (seta para cima ao lado da resposta).
    – Leandro
    Commented 16/04/2018 às 15:36

Você deve fazer log-in para responder a esta pergunta.

Esta não é a resposta que você está procurando? Pesquise outras perguntas com a tag .