show a div if some fields are not empty

Question

show a div if some fields are not empty

Navigation

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

0

I have some input that I need to validate and I have an input with id "show" hidden with hide ();

I want to show that input if for example salary and position are not empty the other input that I have may be empty.

I was stuck with the if because I have to apply a function in case they are not empty but I can not think of anything

if($('#sueldo').val() != ''){
            $('#mostrar').show();
        }



<div id="collapseOne" class="panel-collapse collapse" aria-expanded="false" style="height: 0px;">
                    <div class="box-body">
                      <div class="form-group col-md-12">
                        <label class="control-label">Disponibilidad</label>
                          <label>
                            <label class="checkbox-inline">
                              <input type="checkbox" name="diasTrabajados[]" class="flat-red" checked value="Lunes">
                              Lunes
                            </label>
                            <label class="checkbox-inline">
                              <input type="checkbox" name="diasTrabajados[]" class="flat-red" checked value="Martes" >
                              Martes
                            </label>
                            <label class="checkbox-inline">
                              <input type="checkbox" name="diasTrabajados[]" class="flat-red" checked value="Miercoles">
                              Miercoles
                            </label>
                            <label class="checkbox-inline">
                              <input type="checkbox" name="diasTrabajados[]" class="flat-red" checked value="Jueves" >
                              Jueves
                            </label>
                            <label class="checkbox-inline">
                              <input type="checkbox" name="diasTrabajados[]" class="flat-red" checked value="Viernes">
                              Viernes
                            </label>
                            <label class="checkbox-inline">
                              <input type="checkbox" name="diasTrabajados[]" class="flat-red" value="Sabado" >
                              Sabado
                            </label>
                            <label class="checkbox-inline">
                              <input type="checkbox" name="diasTrabajados[]" class="flat-red" value="Domingo" >
                              Domingo
                            </label>
                        </label>
                      </div>
                      <div class="form-group col-md-2">
                        <div class="bootstrap-timepicker">
                          <label>Horario entrada</label>
                          <div class="input-group">
                            <input type="text" class="form-control timepicker"  id="entrada" name="Datos[horarioEntrada]">
                            <div class="input-group-addon">
                              <i class="fa fa-clock-o"></i>
                            </div>
                          </div>
                        </div>
                      </div>
                      <div class="form-group col-md-2">
                        <div class="bootstrap-timepicker">
                          <label>Horario salida</label>
                          <div class="input-group">
                            <input type="text" class="form-control timepicker"  id="salida" name="Datos[horarioSalida]">
                            <div class="input-group-addon">
                            <i class="fa fa-clock-o"></i>
                            </div>
                          </div>
                        </div>
                      </div>
                      <div class="form-group col-md-3">
                        <label class="control-label">Fecha de solicitud</label>
                        <input type="text" class="form-control input-sm" maxlength="6"  name="Datos[fechaSolicitud]"  id="fechaSolicitud" value="<?php echo date("Y")."-".date("m")."-".date("d");?>" readonly> 
                      </div>
                      <div class="form-group col-md-3">
                        <label class="control-label">Puesto</label>
                        <select class="form-control input-sm selectpicker" data-live-search="true" name="Datos[puesto]"  ="" id="puesto">
                        <?php 
                        foreach ($puestos as $puesto){
                        ?>                            
                        <option  value="<?php echo $puesto['idPuesto']?>"><?php echo $puesto['nombre']?></option>
                        <?php
                        }
                        ?> 
                        </select> 
                      </div>
                      <div class="form-group col-md-2">
                        <label class="control-label">Sueldo deseado</label>
                        <input type="number" class="form-control input-sm" step="0.01"   name="Datos[sueldo]"   id="sueldo" required>
                      </div>
                    </div>
                  </div>

<div id="mostrar">Mostrar</div>

javascript jquery

asked by Carlos Enrique Gil Gil 01.03.2018 в 16:45

source

2 answers

0

To be able to check empty inputs, you must first take your events. In your case they can be change() , keyup() , keydown() , among others.

Event change with jQuery

$('#sueldo').on('change', function(){
    if($('#sueldo').val() != ''){
            $('#mostrar').show();
    }
    else{
           $('#mostrar').hide();
    }
});

It is more effective to measure the length of the value val (). length to validate empty inputs.

if($('#sueldo').val().length > 0)
                $('#mostrar').show();
        else
               $('#mostrar').hide();

answered by 01.03.2018 в 17:16

problems BD filled [closed] Rename an attribute of another class in java

score 1 · Accepted Answer

What you must do is first attack an event, I suggest you do it by class as I show you in the following example (which you can execute) so that you do not have to attack for each control, then in the event you call the validation, a function that is responsible for returning a Boolean value if the form is correct, and in this way to be able to decide if it validates what action is taken and if not CC.

function validoFrm(){
  return (($('#Sueldo').val() != '') &&($('#Puesto').val() != -1));
}



$(function(){

$('.ValidoCLass').hide();

$('.requerido').change(function(){
  if(validoFrm()){
    $('.ValidoCLass').show();
  } else{
    $('.ValidoCLass').hide();
  }
});


});

<script src="https://code.jquery.com/jquery-3.2.1.slim.min.js" integrity="sha384-KJ3o2DKtIkvYIK3UENzmM7KCkRr/rE9/Qpg6aAZGJwFDMVNA/GpGFF93hXpG5KkN" crossorigin="anonymous"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.12.9/umd/popper.min.js" integrity="sha384-ApNbgh9B+Y1QKtv3Rn7W3mgPxhU9K/ScQsAP7hUibX39j7fakFPskvXusvfa0b4Q" crossorigin="anonymous"></script>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css" integrity="sha384-Gn5384xqQ1aoWXA+058RXPxPg6fy4IWvTNh0E263XmFcJlSAwiGgFAW/dAiS6JXm" crossorigin="anonymous">
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/js/bootstrap.min.js" integrity="sha384-JZR6Spejh4U02d8jOt6vLEHfe/JQGiRRSQQxSfFWpi1MquVdAyjUar5+76PVCmYl" crossorigin="anonymous"></script>


<label>Sueldo</label>
<input type="number" id="Sueldo" class="form-control requerido">

<label>Puesto</label>
<Select id="Puesto" class="form-control requerido">
<option value="-1">Seleccione</option>
<option value="1">Puesto 1</option>
<option value="2">Puesto 2</option>
<option value="3">Puesto 3</option>
</select>
</br>
<label class="ValidoCLass">Se validaron los campos sueldo y Puesto</label>
<input class="ValidoCLass form-control" type="text" id="CampoValidado"/>

Greetings!