Get ID using jQuery

0

I have a form with the fields check_in and check_out .

I wish that if one of the two is empty the button " Search " disappears and only appears in case the two fields are with a date.

I have the necessary libraries included jQuery and the file where I have the jQuery code:

<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/jqueryui/1.12.1/jquery-ui.min.css">
<script src="http://momentjs.com/downloads/moment.min.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://code.jquery.com/jquery-1.12.4.js"></script>
<script src="https://code.jquery.com/ui/1.12.1/jquery-ui.js"></script>
<script type="text/javascript" src="js/calculoNoches.js"></script>

HTML Code:

<label for="check_in"><b>Entrada:</b></label>
    <input type="text" placeholder="Fecha de entrada" name="check_in" id="check_in" value="<?php if(isset($_POST['check_in'])){ echo $_POST['check_in']; }?>">
<label for="check_out"><b>Salida:</b></label>
    <input type="text" placeholder="Fecha de salida" name="check_out" id="check_out" onchange="calculoNoches();" value="<?php if(isset($_POST['check_out'])){ echo $_POST['check_out']; }?>" disabled>

JQuery code:

$(document).on('ready',function(){
    $check_in = $(this).attr("check_in");
    $check_out = $(this).attr("check_out");
    if($check_in == "" || $check_out == ""){
            $('#buscar').hide();
    }
});
    
asked by omaza1990 08.01.2018 в 11:59
source

2 answers

2

To perform this procedure you must first verify the value of each input, then depending on its values deactivate or activate the button

  $(document).ready(function() 
  {
    $("#boton").click(function()
    {
      var checkin = $("#checkin").val();
      var checkout = $("#checkout").val();
      if (checkin == "" || checkout == "")
      {
        alert("rellena los campos");
        $("#boton").attr("disabled", "true");
      }
      else
      {
        $("#boton").attr("disabled", "false");
        alert("go");
      }    
    })
  });
    
answered by 08.01.2018 / 12:58
source
0

When this considers that there is a change in the text, it validates that one or the other is not empty (must add the function that corroborates a date), and removes the button if necessary.

$(document).ready(function(){
	  $("#check_in").change(function(){
      // if(validarFecha($(this)val())){
			    corroborarInputFecha();
      /* }else{
          alert("Debe ingresar una fecha valida");
      */
	  });

	  $("#check_in").change(function(){
			// if(validarFecha($(this)val())){
			    corroborarInputFecha();
      /* }else{
          alert("Debe ingresar una fecha valida");
      */
		});
	});

  function corroborarInputFecha(){
	    if($("#check_in").val() == "" || $("#check_out").val() == ""){
	        $('#buscar').hide();
	    }else{
			    $('#buscar').show();
	    }
	}
  
  /*
    function validarFecha(fecha){
      //valida fecha
      //return true si es valido
      //return false si no es una fecha
    }
  */
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

<label for="check_in"><b>Entrada:</b></label>

    <input type="text" placeholder="Fecha de entrada" name="check_in" id="check_in" value="asd">
    
<label for="check_out"><b>Salida:</b></label>

    <input type="text" placeholder="Fecha de salida" name="check_out" id="check_out" onchange="calculoNoches();" value="xcv" disabled="">
    
<br>
<button id="buscar">Buscar</button>

Run the script and check please

    
answered by 08.01.2018 в 13:07