validate data when selecting an option in a combobox

Question

validate data when selecting an option in a combobox

Navigation

#1 by (4 votes)
#2 by (3 votes)

3

I have a select with the following data:

<select name="entidad" id="entidad">
    <option disabled selected>Seleccionar Entidad</option>
    <option>TODAS</option>                                             
    <option>BANCOLOMBIA</option> 
    <option> BANCO BBVA</option> 
    <option>COOTRAPELDAR</option>
    <option> DIEBOLD</option>                                
 </select>

and I also have two input to make a query by date range. what I want is to create a function in js that when choosing an option of the select validates me if the input with the id="start_date" of the dates are empty, if they are empty, I normally make the query. But I still do not know how to do it. Would someone explain to me how I could do it?

javascript jquery html

asked by Edgar Yezid Cruz 02.04.2018 в 21:46

source

2 answers

4

If you want it with pure javascript use the event onchange() of select :

 function validarInputs(){
   if(document.getElementById("start_date").value =="")
     {
        alert("Fecha inicio vacía");
     }
     else
     {
     	if(document.getElementById("end_date").value ==""){
     		alert("Fecha fin vacía");
        }
        else
        {
          //Todo correcto
        }            
     }    
   }

<select name="entidad" id="entidad" onchange="validarInputs()">
    <option disabled selected>Seleccionar Entidad</option>
    <option>TODAS</option>                                             
    <option>BANCOLOMBIA</option> 
    <option> BANCO BBVA</option> 
    <option>COOTRAPELDAR</option>
    <option> DIEBOLD</option>                                
 </select>
 <input type="date" id="start_date"/>
 <input type="date" id="end_date"/>

And if you want with JQuery you can use on.("change",...) or the method change() :

$("#entidad").on("change", function(){
  if($("#start_date").val() =="")
     {
        alert("Fecha inicio vacía");
     }
     else
     {
     	if($("#end_date").val() ==""){
     	   alert("Fecha fin vacía");
     	}
        else
        {
           //Todo correcto
        }
        
     }    
})

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<select name="entidad" id="entidad">
    <option disabled selected>Seleccionar Entidad</option>
    <option>TODAS</option>                                             
    <option>BANCOLOMBIA</option> 
    <option> BANCO BBVA</option> 
    <option>COOTRAPELDAR</option>
    <option> DIEBOLD</option>                                
 </select>
 <input type="date" id="start_date"/>
 <input type="date" id="end_date"/>

For the shipment, what exactly would it be? A shipment to the server? In that case I advise you to take a look at ajax calls

answered by 02.04.2018 в 22:04

javascript function replace Bring information from one activity to another

score 3 · Accepted Answer

You can do the following:

Add one listener to each change in select
Within the listener function, collect the input value start_date
Check if this value is not empty by if (startDate)
Note that trim was used when creating the variable startDate , to at least control the blanks are not considered as real values. Since the input will pick up a field of the date type, it would be convenient to establish a more strict level of validation, but this is not the main purpose of the question ...
Note that a value has been added to each option , which can always be recovered by this if necessary. This is particularly useful when you want to make queries based on that selected option. Suppose that each number would represent a column ID in a database, instead of using the name of the bank, it is much better to use the ID numeric% thereof.
From there, within the first if you could implement a call to Ajax, which will send the data to the server and bring you the answer.

Here is the code:

var selEntidad = document.getElementById("entidad");

selEntidad.addEventListener("change", function(event) {

  var startDate = document.getElementById("start_date").value.trim();
  if (startDate) {
    console.log("no está vacío... proceder. \nAquí tienes el valor del select: " + this.value + "\ny este es el del input: " + startDate);
  } else {
    console.log("está vacío...");
  }
});

<input id="start_date" type="date" placeholder="Escriba la fecha" />
<select name="entidad" id="entidad">
    <option disabled selected>Seleccionar Entidad</option>
    <option value="1">TODAS</option>
    <option value="2">BANCOLOMBIA</option> 
    <option value="3"> BANCO BBVA</option> 
    <option value="4">COOTRAPELDAR</option>
    <option value="5"> DIEBOLD</option>                             
 </select>