Good morning. I am doing a web application of shared races, type "Uber". I want you to submit a query to the database with the list of registered drivers searching for cpf, but that I want you to show on this green carousel.
InthiscodewithAjax,itrunsperfectly,Ievenputadivbelowittotestanditworksperfectly.
<divid="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="validate">
</div>
<div class="input-field col s2 ">
<button class="btn-floating btn-large waves-effect waves-light " type="submit" id="buscar"><i class="material-icons">search</i></button>
</div>
<script>
function buscar (cpf){
$.ajax({
type: 'POST',
dataType: 'html',
url: 'componentes/cons_motoca.php',
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>
// resto de código
</div>
<div id="cons_motoca"></div>
But I need you to present this external code, which is the carousel:
<div class="carousel carousel-slider center" data-indicators="true" style="height: 480px;">
<div class="carousel-fixed-item center">
<a class="btn waves-effect white teal-text darken-text-2">Excluir</a>
</div>
<div class="carousel-item teal white-text" href="#one!">
<h2>Lista de Corridas</h2>
<p class="white-text"><div id="cons_motoca"><?php include("componentes/cons_motoca.php"); ?></div></p>
</div>
<div class="carousel-item teal lighten-1 white-text" href="#two!">
<h2>Lista de Motoristas</h2>
<p class="white-text">Aqui apresentará uma lista dos Motoristas cadastrados</p>
</div>
<div class="carousel-item teal lighten-2 white-text" href="#three!">
<h2>Lista de Passageiros</h2>
<p class="white-text">Aqui apresentará uma lista dos Passageiros cadastrados</p>
</div>
</div>