Autocomplete does not display php form data

Question

I’m having a problem with a site where the autocomplete that searches the database data is not returning the value of the php page where the GET upload. When I go to the console it shows error in the following line.

document.getElementById("dados_essenciais").innerHTML = con_consulta.responseText;

javascript

function autoComplete(){
    document.getElementById("loading").style.display = "block";
    var con_consulta;
    if (window.XMLHttpRequest) {
        con_consulta = new XMLHttpRequest();
    }else{
        con_consulta = new ActiveXObject("Microsoft.XMLHTTP");
    }

    con_consulta.onreadystatechange = function(){
        if (con_consulta.readyState == 4 && con_consulta.status == 200) {
            document.getElementById("dados_essenciais").innerHTML = con_consulta.responseText;
            document.getElementById("loading").style.display = "none";
        }
    }

    var cli_codigo = document.getElementById("cli_codigo").value;

    con_consulta.open("GET", "handle.php?cli_codigo="+cli_codigo,true);
    con_consulta.send(null);
}

CNPJ Social Reason

<div class="row">
    <div class="col-sm-12 col-md-6 col-lg-6 col-xl-6">
        <div class="form-group">
            <label>CNPJ <a href="#" data-toggle="modal" data-target="#exampleModal"><i class="fa fa-search" aria-hidden="true"></i></a></label>
            <input class="form-control" type="number" name="cnpj" onblur="autoComplete();" id="cli_codigo" required>
        </div>
    </div>
    <img src="http://primula.grupoprestarh.com.br/view/ordem-servico/loading.gif" alt="" id="loading" class="loadingModal" style="display: none">

    <div class="col-sm-12 col-md-6 col-lg-6 col-xl-6">
        <div class="form-group">
            <label>Razão Social</label>
            <div class="dados_essenciais">
                <input class="form-control" type="hidden" name="codigo" value="">
                <input class="form-control" type="text" name="razaosocial" value="">
            </div>
        </div>
    </div>
</div>

Answer 1

This error is because you are searching for an element with id #dados_essenciais which does not exist. Instead there is an element with a class .dados_essenciais.

Or you change the class for id in:

<div class="dados_essenciais">

Or change the code of:

document.getElementById("dados_essenciais").innerHTML = con_consulta.responseText;

To:

document.querySelector(".dados_essenciais").innerHTML = con_consulta.responseText;

But it’s about class .dados_essenciais is the first on the page, otherwise he will find another one that is the first. But it would be better if you put an id if there are several elements with the same class and it has CSS formatting or other type of functionality:

<div id="dados_essenciais" class="dados_essenciais">