Populate input’s with Ajax database data

Question

I need you to fill out the input CPF/CNPJ Bring me the customer’s zip code and city that is automatically registered in the bank after losing the focus of the CPF/CNPJ input.

The consultation at the bank is not a problem is already ok just would like to know how to return the information within the input cep - city (there will be more inputs these are an example).

So far only managed to return some sample data within a div.

Form

<form method="POST" action="" id="formulario">

    <legend><b>Dados do Destinatário da Entrega</b></legend>
    <label>Nome<br>
        <input type="text" name="nome" id="nome">
    </label>

    <label>CPF/CNPJ<br>
        <input type="text" name="cpf" id="cpf" required>
    </label>

    <label>CEP<br>
        <input type="text" name="cep" id="cep">
    </label>

    <label>Cidade<br>
        <input type="text" name="cidade" id="cidade">
    </label>

</form>

<div class="recebeDados"></div>

<script>
$(document).ready(function () {

    $('#formulario').submit(function() {
         var dados = $('#formulario').serialize();

        $.ajax({
            type : 'POST',
            url  : 'precontroller/precontroller_valida_form.php',
            data: dados,
            success :  function(data){
                $('.recebeDados').html(data);
            }
        });

        return false;
    });
});

</script>

precontroller_valida_form.php

<?php

if (isset($_POST) && !empty($_POST)){

    //Consulta no banco

    echo $_POST['nome'];
}

?>

Answer 1

Your problem is the response of AJAX, to facilitate the use of the answer, use the json_encode in PHP and AJAX set the type to JSON.

Example:

<form method="POST" action="" id="formulario">

    <legend><b>Dados do Destinatário da Entrega</b></legend>
    <label>Nome<br>
        <input type="text" name="nome" id="nome">
    </label>

    <label>CPF/CNPJ<br>
        <input type="text" name="cpf" id="cpf" required>
    </label>

    <label>CEP<br>
        <input type="text" name="cep" id="cep">
    </label>

    <label>Cidade<br>
        <input type="text" name="cidade" id="cidade">
    </label>

</form>

<div class="recebeDados"></div>

<script>

        $('#cpf').blur(function() {
            var dados = $('#formulario').serialize();

            $.ajax({
                type : 'POST',
                dataType: 'JSON',
                url  : 'precontroller/precontroller_valida_form.php',
                data: dados,
                success :  function(data){
                    $('#cidade').val(data.cidade);
                    $('.recebeDados').html(data.cidade);
                }
            });

            return false;
        });

</script>

precontroller_valida_form.php

<?php

$dados = array();
if (isset($_POST) && !empty($_POST)){

    //Consulta no banco
    $dados['nome'] = $reposta_consulta['nome'];
    $dados['cidade'] = $reposta_consulta['cidade'];

    echo json_encode($dados);
}

?>

or

<?php

if (isset($_POST) && !empty($_POST)){

    //Consulta no banco
    echo json_encode($reposta_consulta);
}

?>