Problems with Ajax query

Question

I’m trying to make a bank appointment without giving refresh, so I’m using the Ajax, but it’s not working, it doesn’t give the refresh, nor returns anything.

The code of the page that should present the query:

<div id="motorista" style="height: 380px;">
<div class="row" style="margin-bottom: 0;">
        <div class="input-field col s10 ">
            <input placeholder="Busca por CPF" id="cpf" type="text" class="form-control">
        </div>
        <div class="input-field col s2 ">
            <button class="btn-floating btn-large waves-effect waves-light " type="button" id="buscar"><i class="material-icons">search</i></button>
        </div>

    <script>

        function buscar (cpf){
            $.ajax({
                type: 'POST',
                dataType: 'html',
                url: 'componentes/cons_motoca.php' //É onde fica a consulta com o banco
                beforeSend: function(){
                    $("#cons_motoca").html("Segura as pontas");
                },
                data: {cpf: cpf},
                success: function (msg){    
                    $("#cons_motoca").html(msg);
                }
            })
        }

        $('#buscar').click(
            function(){
                buscar($("#cpf").val())
            }
        );

    </script>

</div>
<form name="motorista" action="componentes/cad_motoca.php" method="POST">
    <div class="input-field col s6">
        <input placeholder="Digite o nome do motorista" name="nome" type="text" class="validate">
        <label for="nome">Motorista:</label>
    </div>

    <div class="input-field col s6">
        <select name="disponibilidade" type="text" class="validate">
            <option value="" disabled selected></option>
            <option value="Ativo">Ativo</option>
            <option value="Inativo">Inativo</option>
        </select>
        <label>Disponibilidade</label>
    </div> 

    <div class="input-field col s6">
        <label for="cpf">CPF:</label>
        <input placeholder="Digite o CPF" name="cpf" type="text" class="validate">
    </div>

    <div class="input-field col s6">
        <label for="carro">Carro:</label>
        <input placeholder="Digite o carro" name="carro" type="text" class="validate">
    </div> 

    <div class="input-field col s6">
        <label for="data_nasc">Data de Nascimento:</label>
        <input placeholder="Digite a Data de Nascimento" name="data_nasc" type="text" class="validate">
    </div>

    <div class="input-field col s6">
        <select name="sexo" type="text" class="validate">
            <option value="" disabled selected></option>
            <option value="Masculino">Masculino</option>
            <option value="Feminino">Feminino</option>
        </select>
        <label>Sexo</label>
    </div>
    <div class="row">
        <div class="input-field col s8">
            <input type="submit" class="btn" value="Cadastrar">
        </div>
    </div>
</form>
</div>

<div id="cons_motoca"></div>

The code for consulting the bank:

<div>
<?php
    if(isset($_POST['cpf'])){
        echo "<table>";
            echo "<tr>";
                echo "<th>NOME</th>";
                echo "<th>DISPONIBILIDADE</th>";
                echo "<th>CARRO</th>";
                echo "<th>CPF</th>";
                echo "<th>DATA DE NASCIMENTO</th>";
                echo "<th>SEXO</th>";
            echo "</tr>";

            $strcon = mysqli_connect('localhost', 'root', '') or die('Erro ao conectar ao banco de dados');
            mysqli_select_db($strcon, 'uber');
            $sql = "SELECT nome, disponibilidade, carro, cpf, nascimento, sexo FROM tb_motorista WHERE cpf = $_POST[cpf]";
            $resultado = mysqli_query($strcon,$sql) or die("Erro ao retornar dados");

            while ($registro = mysqli_fetch_array($resultado)) {
                $nome = $registro['nome'];
                $disponibilidade = $registro['disponibilidade'];
                $carro = $registro['carro'];
                $cpf = $registro['cpf'];
                $nascimento = $registro['nascimento'];
                $sexo = $registro['sexo'];
                echo "<tr>";
                    echo "<td>".$nome."</td>";
                    echo "<td>".$disponibilidade."</td>";
                    echo "<td>".$carro."</td>";
                    echo "<td>".$cpf."</td>";
                    echo "<td>".$nascimento."</td>";
                    echo "<td>".$sexo."</td>";
                echo "</tr>";
            }
            mysqli_close($strcon);
        echo "</table>";
    }else{
        echo 'Digite o número do CPF para consultar';
    }
?>
</div>

My Footer:

</main>

<script src="js/jquery-3.2.1.min.js"></script>

<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>

<script src="js/materialize.min.js"></script>

<script type="text/javascript">
    console.log(document);
    $('.carousel.carousel-slider').carousel({fullWidth: true});

    $('.datepicker').pickadate({
        selectMonths: true, // Creates a dropdown to control month
        selectYears: 15, // Creates a dropdown of 15 years to control year,
        today: 'Today',
        clear: 'Clear',
        close: 'Ok',
        closeOnSelect: false // Close upon selecting a date,
    });

    $('.timepicker').pickatime({
        default: 'now', // Set default time: 'now', '1:30AM', '16:30'
        fromnow: 0,       // set default time to * milliseconds from now (using with default = 'now')
        twelvehour: false, // Use AM/PM or 24-hour format
        donetext: 'OK', // text for done-button
        cleartext: 'Clear', // text for clear-button
        canceltext: 'Cancel', // Text for cancel-button
        autoclose: false, // automatic close timepicker
        ampmclickable: true, // make AM PM clickable
        aftershow: function(){} //Function for after opening timepicker
    });

    $('.timepicker').pickatime({
        default: 'now', // Set default time: 'now', '1:30AM', '16:30'
        fromnow: 0,       // set default time to * milliseconds from now (using with default = 'now')
        twelvehour: false, // Use AM/PM or 24-hour format
        donetext: 'OK', // text for done-button
        cleartext: 'Clear', // text for clear-button
        canceltext: 'Cancel', // Text for cancel-button
        autoclose: false, // automatic close timepicker
        ampmclickable: true, // make AM PM clickable
        aftershow: function(){} //Function for after opening timepicker
    });

    $(document).ready(function() {
        $('select').material_select();
    });

</script>

</body>
</html>