Appear button after filling two fields

Question

Appear button after filling two fields

Navigation

#1 by (2 votes)
#2 by (1 votes)

1

I have 2 date fields and I will use those dates in a select and I would like a "browse" button to appear only when the two fields are filled in, it follows 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>

* CalendarIni and EndPort are a datepicker. ** button that you would like to appear only after the calendars have been filled

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

javascript jquery html5

asked by anonymous 12.12.2017 / 17:46

2 answers

2

Oops, good afternoon. What you can do to solve this is to add the display: none in the style of the button and make a check via jquery to see if the inputs have any content. Here are 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 on both calendar inputs and below is the 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 do not forget to add the reference to jquery ... I hope I have helped!

12.12.2017 / 18:03

Restrict an R code to a certain local machine Find string inside string without library string.h?

score 1 · Accepted Answer

Datepicker captures the event of clicking a date on onSelect: . Therefore, you must add 2 onSelect: to each function that applies the calendars 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><linkrel="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><formmethod="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>