Appear button after filling two fields

Question

I have 2 date fields and I will use these dates in a select and I would like a "query" button to appear only when the two fields are filled, follow the current code:

     <form method="post" action="">

          Início do período:
          <input type="text" id="calendarioIni" name="dataInicio">*
          Fim do período:
          <input type="text" id="calendarioFim" name="dataFim">*
          <input type="submit" value="Consultar"/>**                                                                    
          <br><br><br>

          <?php if(isset($_POST['dataInicio']) && isset($_POST['dataFim']))
          {
               $dataIni = $_POST['dataInicio'];
               $dataFim = $_POST['dataFim'];
               echo $dataIni."<br>";//Teste para verificar o valor nas variáveis que recebem a data via POST
               echo $dataFim;
          } 
          ?>
          </form>

    <script>

       window.onload = function(){
   var dataIni = document.querySelector("#calendarioIni");
   var dataFim = document.querySelector("#calendarioFim");

   dataIni.addEventListener('input', checaVazio );
   dataFim.addEventListener('input', checaVazio );

   function checaVazio(){
      var botao = document.querySelector("form input[type='submit']");
      botao.style.display = dataIni.value && dataFim.value ? "inline" : "none";
   }
};

    var start = new Date(1997, 12, 01);
    var end = new Date(1998, 11, 31) ;
    var view = new Date(1997, 12, 01);

    $(document).ready(function() {
        $('#calendarioIni').datepicker({
           endDate: end,
           startDate: start,
           startView: view

        });
    });

    $(document).ready(function() {
        $('#calendarioFim').datepicker({
           endDate: end,
           startDate: start,
           startView: view

        });
    });

        </script> 

*calendarioIni and calendarioFim are a datepicker.
**button that you would like to appear only after filling the calendars

What changes should occur so that the button only appears with the dates completed?

Answer 1

Whoa, good afternoon, guys. What you can do to solve this is to add the display: None in the style of the button and check via jquery to see if the inputs have any content. Follow the modifications below:

<input type="text" id="calendarioIni" onchange="ValidarPreenchimento()" name="dataInicio">*
Fim do período:
<input type="text" id="calendarioFim" onchange="ValidarPreenchimento()" name="dataFim">*
<input type="submit" value="Consultar" style="display:none" id="btnConsultar"/>**

I added an onchange event to both calendar inputs and below is Function that does the validation

<script>
function ValidarPreenchimento(){
    var calendarioIni = $('#calendarioIni').val();
    var calendarioFim = $('#calendarioFim').val();

    if(calendarioIni != "" && calendarioFim != ""){
        $('#btnConsultar').show();
    }else{
        $('#btnConsultar').hide();
    }
}

Just don’t forget to add the reference to jquery... I hope I’ve helped!

Answer 2

Datepicker captures the event of clicking on a date on onSelect:. This way, we need to add 2 onSelect: in each function applying the timetables to inputs, and call them a function that will check if the fields are empty.

var dataIni = document.querySelector("#calendarioIni");
var dataFim = document.querySelector("#calendarioFim");

function checaVazio(){
   var botao = document.querySelector("form input[type='submit']");
   botao.style.display = dataIni.value && dataFim.value ? "inline" : "none";
}

var start = new Date(1997, 12, 01);
    var end = new Date(1998, 11, 31) ;
    var view = new Date(1997, 12, 01);

    $(document).ready(function() {
        $('#calendarioIni').datepicker({
           endDate: end,
           startDate: start,
           startView: view,
           onSelect: checaVazio

        });
    });

    $(document).ready(function() {
        $('#calendarioFim').datepicker({
           endDate: end,
           startDate: start,
           startView: view,
           onSelect: checaVazio

        });
    });

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<link rel="stylesheet" href="https://ajax.googleapis.com/ajax/libs/jqueryui/1.12.1/themes/smoothness/jquery-ui.css">
<script src="https://ajax.googleapis.com/ajax/libs/jqueryui/1.12.1/jquery-ui.min.js"></script>

<form method="post" action="">

  Início do período:
  <input type="text" id="calendarioIni" name="dataInicio">*
  Fim do período:
  <input type="text" id="calendarioFim" name="dataFim">*
  <input style="display: none;" type="submit" value="Consultar" />**                                                                    
  <br><br><br>
</form>