Run Ajax script automatically

Question

I’m having a problem with a college project.

I would like to know how to run this Ajax script automatically:

<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 );
    } );
}

After the user fills in an input:

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

Answer 1

If I understand you want to run after filling the "correct format", that is to fill wrong (including the mask) should check the content of what was typed

In case use onfocusout or onblur can only conflict with the execution time of the mask, for example if you typed wrong and take the focus of the field the ajax would perform anyway, so to avoid this you can use a regex with .test() in string, thus:

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

And in the JS so:

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 );
    } );
}

---

How regular expression works

To regex (regular expression) in the specific case works like this:

^\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

Answer 2

You can use the event onblur similar to the way you used the onkeyup.

Example:

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

The event onblur is triggered when the input field loses focus

Answer 3

There are several possibilities in this case, one of them would be to use the event onfocusout, that is, after the user fills the field and takes the focus of it, the function will be executed.

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