Validate a drop-down list with a button that opens a modal window in bootstrap

Navigation
1

I have a button that displays a modal window with bootstrap. 

<button id="btnPrueba" type="button" data-toggle="modal" data-target="#VentanaProducto" style="height: auto; background-color: lightgray;">

But now I need to evaluate before displaying the modal window that from the following list has been selected Argentina 

<select name="Comb" id="Contenido" class="form-control">
	<option value="0">-</option>
	<option value="12">Argentina</option>
	<option value="44">Colombia</option>
</select>

Thanks

    
asked by Nelson Rodriguez 21.03.2018 в 16:36
source

4 answers

0

I do not understand your question very well. But according to what I got to understand, I made you a small demo.

HTML: 

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>DEMO </title>
  <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css">
</head>
<body>

    <select name="Comb" id="Contenido" class="form-control">
      <option value="0">-</option>
      <option value="12">Argentina</option>
      <option value="44">Colombia</option>
    </select>

<!-- Modal -->
<div class="modal fade" id="exampleModal" tabindex="-1" role="dialog" aria-labelledby="exampleModalLabel" aria-hidden="true">
  <div class="modal-dialog" role="document">
    <div class="modal-content">
      <div class="modal-header">
        <h5 class="modal-title" id="exampleModalLabel">Modal title</h5>
        <button type="button" class="close" data-dismiss="modal" aria-label="Close">
          <span aria-hidden="true">&times;</span>
        </button>
      </div>
      <div class="modal-body">
        aqui la informacion
      </div>
      <div class="modal-footer">
        <button type="button" class="btn btn-secondary" data-dismiss="modal">Close</button>
        <button type="button" class="btn btn-primary">Save changes</button>
      </div>
    </div>
  </div>
</div>


   <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
  <script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/js/bootstrap.min.js"></script>
</body>
</html>

And your js file would be something like that. 

$(document).ready(function(){
    $("#Contenido").change(function(){
    //Seleccionar el value del campo seleccionado.
    var val = $(this).find('option:selected').val();

    //Significa que es Argentina en este caso.
    if(val == 12){
     //Mostramos el modal
     $("#exampleModal").modal('show');
    }
  });
});
    
answered by 21.03.2018 / 17:00
source
0

You can do it with Jquery, creating the onclick event and checking the value: 

<button id="btnPrueba" type="button" data-toggle="modal" style="height: auto; background-color: lightgray;" onclick="validar()">


<script>

    function validar(){

        if ($("#Contenido").val() == "12")
        {
            $('#VentanaProducto').modal('show');
        }
        else{
            return false;
        }
    }

</script>
    
answered by 21.03.2018 в 17:01
0

The first thing would be to make an event when the click on the button occurs.

The next thing would be to get the value of the select and compare it with your result

And then finally sample your modal. 

$('#validador').click(function(){
  var select =$('#contenido').val();
  if(select == 12){
    $('#myModal').modal('show')
  }
})
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet"/>

<select name="Comb" id="contenido" class="form-control">
	<option value="0">-</option>
	<option value="12">Argentina</option>
	<option value="44">Colombia</option>
</select>

<a class="btn btn-primary btn-lg" id="validador">
  Launch demo modal
</a>
<div class="modal fade" tabindex="-1" role="dialog" id="myModal">
  <div class="modal-dialog" role="document">
    <div class="modal-content">
      <div class="modal-header">
        <button type="button" class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">&times;</span></button>
        <h4 class="modal-title">Modal title</h4>
      </div>
      <div class="modal-body">
        <p>One fine body&hellip;</p>
      </div>
      <div class="modal-footer">
        <button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
        <button type="button" class="btn btn-primary">Save changes</button>
      </div>
    </div><!-- /.modal-content -->
  </div><!-- /.modal-dialog -->
</div><!-- /.modal -->
    
answered by 21.03.2018 в 16:59
-1

I did not understand very well what to deploy; I do not know if you mean showing the modal or closing it. However, use the property 

$("#myModal").on("hidden.bs.modal", function () {
    // evento al cerrar el modal
});

or 

$("#myModal").on("show.bs.modal", function () {
    // evento al mostrar el modal
});

And inside you can capture the data before it is displayed or when the modal is hidden.

In your case, you would obviously use the id of your modal: $("#btnPrueba") .

    
answered by 21.03.2018 в 16:58
Use a GridView The camera stops on some devices