Do a database search without refreshing the page

Question

I’ve been trying to do a database search for a while, through an input. The idea is in a Model have an input to enter a date and without using a Submit send the date to another Model and then present the data already entered in the database in the other Model

So far I’ve only been able to show the date of the first Model in the 2nd, I also already have the "research" but it is commented.

HTML

  <h2>Small Modal</h2>
  <!-- Trigger the modal with a button -->
  <button type="button" class="btn btn-info btn-lg" data-toggle="modal" data-target="#myModal"
  >Open Small Modal</button>

In the 1st Model

<div class="modal-body">
        <input type="date" id="myDate" value="2000-05-05" style="font-size:20px;">         

        </div>
        <div class="modal-footer">
        <div class="teste3" data-toggle="modal" data-target="#myModal4" onclick="jstophp();teste50()">
        <a class="collapse-item">Pesquisar</a>
        </div>

In the 2nd Model

 <input type="date" class="form-control form-control-user" id="dias" name="dia" 
 placeholder="Insira o Dia" style="margin-top:2%;margin-bottom:2%;font-size:20px;">

Javascript when Clicking on the 1st Model

<script>
function jstophp(){
  
 javavar=document.getElementById("myDate").value;  
document.getElementById("dias").value="<?php 
$phpvar='"+javavar+"'; 
echo $phpvar;?>";


window.history.pushState( {} , '', '?data=<?php echo $phpvar ?>' );
<?php $batata = 50; ?>

 <?php //$entradas = "SELECT * FROM calendario WHERE dia = '+javavar+'  ";
//$resultado_entradas = mysqli_query($conn, $entradas);
//while($rows_calen = mysqli_fetch_array($resultado_entradas)){ ?>
//document.getElementById("teste<?php // echo $batata; ?>").innerHTML="batata";
<?php //$batata++; ?>
<?php //} ?> 
}



</script>

I also tried through URL. I left down so much the attempt that I tried by URL and commented search.

Answer 1

AJAX stands for Asynchronous Javascript and XML. In a nutshell, it is the use of the Xmlhttprequest object to communicate with server-side scripts. Make requests to the server without reloading the page

function checkAvailability() {
    jQuery.ajax({
    url: "check_availability.php",
    data:'myDate='+$("#myDate").val(),
    type: "POST",
    success:function(data){
        $("#resultado").html(data);
        $("#myModalResult").modal('show');
    },
    error:function (){}
    });
}
/* ### essa função pode ser retirada porém copie o código do input e substitua esse pelo que está dentro do primeiro modal na div com id = frmCheckUsername **/
function showBtnPesquisar() {
    document.getElementById("pesquisar").innerHTML = '<button type="button" class="btn btn-primary btn-sm" onClick="checkAvailability()">Pesquisar</button>';
}

.m2 {
    width: 400px !important; /* aqui vc coloca a largura que deseja */
}

<!--Bibiotecas -->
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
<script src="https://code.jquery.com/jquery-2.1.1.min.js" type="text/javascript"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">

  <!-- ************ Ao carregar a pagina esse titulo e o botão são carregados ****** -->
     <h2>Small Modal</h2>
  <!-- Trigger the modal with a button -->
  <button type="button" class="btn btn-info btn-lg" data-toggle="modal" data-target="#myModal"
  >Open Small Modal</button> 
 
    <!-- ************ Ao clicar no botão acima esse modal surge para escolher a data -->

     <div id="myModal" class="modal fade">
        <div class="modal-dialog m2">
             <div class="modal-content">
                 <div class="modal-header">
                     <button type="button" class="close" data-dismiss="modal"><span>X</span></button>
                 </div>
                 <div class="modal-body">
    
                    <div id="frmCheckUsername">
  <!-- Ao escolher a data a função showBtnPesquisar() faz esse input ser substituido por outro que tem a função checkAvailability() de enviar a data para o PHP. -->
                      <input name="myDate" type="date" id="myDate"  style="height:30px;" onChange="showBtnPesquisar()"> <span id="pesquisar">Selecione a data</span>  
                    </div>          
                      
                 </div>
                 <div class="modal-footer">
                     <button type="button" class="btn btn-default" data-dismiss="modal">Fechar</button>
                 </div>
             </div>
         </div>
     </div>
     
      <!-- Após o Ajax fazer a requisição e retornar os dados resultantes da execução do PHP, na função success:function(data) tem: -->
      <!-- $("#resultado").html(data);que vai colocar o retorno no elemento de id=resultado localizado dentro deste modal -->
      <!-- $("#myModalResult").modal('show'); que vai abrir o modal -->
    
     
        <div id="myModalResult" class="modal fade">
        <div class="modal-dialog">
             <div class="modal-content">
                 <div class="modal-header">
                     <button type="button" class="close" data-dismiss="modal"><span>X</span></button>
                 </div>
                 <div class="modal-body">
                      
                      <span id="resultado"></span>    
                      
                 </div>
                 <div class="modal-footer">
                     <button type="button" class="btn btn-default" data-dismiss="modal">Fechar</button>
                 </div>
             </div>
         </div>
     </div>

The way is this, now it’s easy to adapt to what you want

It is evident that when RUN above, and when selecting a date and clicking the search button nothing will scroll because here does not run PHP