0

Tengo un formulario con los campos check_in y check_out.

Deseo que si alguno de los dos está vacío desaparezca el button "Buscar" y sólo aparezca en caso de que los dos campos están con una fecha.

Tengo incluidas las librerías necesarias como jQuery y el archivo donde tengo el código jQuery:

<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>

Código HTML:

<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>

Código jQuery:

$(document).on('ready',function(){
    $check_in = $(this).attr("check_in");
    $check_out = $(this).attr("check_out");
    if($check_in == "" || $check_out == ""){
            $('#buscar').hide();
    }
});
0

2 respuestas 2

2

para realizar este procedimiento debes primero verificar el valor de cada input, luego dependiendo de sus valores desactivar o activar el boton

  $(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");
      }    
    })
  });
0

Cuando este considere que hay un cambio en el texto, este valida que uno u el otro no este vacío (debe agregar la función que corrobore que sea una fecha), y elimina el botón de ser necesario.

$(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>

Ejecuta el script y comprueba por favor

2
  • Vale, la solución era más simple: $("#check_in").val(). Con el atributo "val()", obtengo el valor del ID si en $ tengo definido #id.
    – omaza1990
    el 8 ene. 2018 a las 13:58
  • Como decía que solo en caso que los dos tuvieran una fecha estuviera el botón buscar y si no este desapareciera, esto hacia aquello. O bien la explicación que diste no fue la mas clara el 8 ene. 2018 a las 14:13

Tu Respuesta

By clicking “Publica tu respuesta”, you agree to our terms of service and acknowledge that you have read and understand our privacy policy and code of conduct.

¿No es la respuesta que buscas? Examina otras preguntas con la etiqueta o formula tu propia pregunta.