0

Tengo un pagina HTML, que debe permitirme el ingreso de información desde una modal.

Lo que necesito es que antes de lanzar la modal, el usuario debe seleccionar dos opciones de lo contrario no se iniciara.

Pongo el siguiente código como ejemplo:

<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" crossorigin="anonymous">
     <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
      <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
    <div class="row">
                    <div class="col-md-12">
                        <div class="box box-primary">
                            <div class="box-header">
                                <h4 class="box-title">
                                </h4>
                            </div>
                            <div class="box-body">
                                <div id="primero"></div>
                                <div class="sonata-ba-collapsed-fields">
    
                                   
                                   <div class="col-md-3">
                                     <div class=" sonata-ba-field sonata-ba-field-standard-natural  ">
                                       <select value=0>
                                                 <option value=0 >seleccione</option>
                                                <option value="volvo">Volvo</option>
                                                <option value="saab">Saab</option>
                                                <option value="mercedes">Mercedes</option>
                                                <option value="audi">Audi</option>
                                        </select> 
                                         </div>
                                          <div>
                                    <select value=0>
                                        <option value=0 >seleccione</option>
                                        <option value=1>bueno</option>
                                        <option value=2>malo</option>
                                        <option value=3>regular</option>
                                        <option value=4>excelente</option>
                                    </select> 
                                    </div>   
    
    
          <div class="row-fluid" style="margin-top: 10px;">
                <div class="span12" align="right">
                  <button type="button" class="btn btn-success btn-sm" data-toggle="modal" data-target="#miModal"><i class="fa fa-plus-circle" aria-hidden="true"></i> Agregar Detalle</button>
    
                </div>
         </div>
    
    
    
    
    <!-- Codigo para lanzar la modal -->
    <div class="modal fade" id="miModal" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true">
    <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" id="myModalLabel">Agregar Criadero</h4>
        </div>
    <form id="newCriadero" action="javascript:void(0);">
        <div class="modal-body">
    <div class="box box-primary">
      <div class="row">
        <div class="box-header">
            <h4 class="box-title">
            </h4>
        </div>
        <div class="box-body">
                <div class="col-md-4">
                <div class="form-group has-feedback">
                  <div class="input-group">
                    <label>Canton:</label>
                    <input type="text" class="form-control" id="canton" name="canton" required>
                    </div>
                  <span class="glyphicon form-control-feedback" aria-hidden="true"></span>
                </div>
                <div class="form-group has-feedback">
                  <div class="input-group">
                    <label>Casas Inspeccionadas:</label>
                    <input type="number" class="form-control"  id="casa_insp" name="casa_insp" required/>
                  </div>
    
                </div>
                <div class="form-group">
                  <label>Casas Positivas:</label>
                  <input type="number" class="form-control" id="casa_pos" name="casa_pos" required>
                </div>
                <div class="form-group">
                  <label>Total Instradomiciliar:</label>
                  <input type="number" class="form-control" id="total_intra" name="total_intra">
                </div>
                <div class="form-group">
                   <label>Total Anopheles Instradomiciliar:</label>
                   <input type="number" class="form-control" id="anopheles_intra" name="anopheles_intra">
                </div>
    
                </div>
         </div>
       </div>
       </div>
        </div>
    <div class="modal-footer">
    <button type="button" class="btn btn-secondary" data-dismiss="modal">Cerrar</button>
    <button type="submit" class="btn btn-success" id="agregarDetalle" name="agregarDetalle" >Agregar</button>
    </div>
    </form>
    </div>
    </div>
    </div>

2
  • Necesitamos ver el código que tienes para poder ayudarte Commented el 8 ene. 2018 a las 19:57
  • alli esta solo que o se por que no se ve Commented el 8 ene. 2018 a las 20:00

1 respuesta 1

0

Le agregue un id a los select del HTML, luego con jquery valide si hay algo seleccionado o no. Si no hay nada selecionado devuelve false y no ejecuta la accion del modal, de lo contrario ejecutaria el modal.

Espero te sirva.

$(".btn").click(function(e) {
  if ($("#gg").val() == 0 && $("#ggg").val() == 0) {
    alert("Seleccione una opcion antes de continuar");
    return false;
  }
});
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" crossorigin="anonymous">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
<div class="row">
  <div class="col-md-12">
    <div class="box box-primary">
      <div class="box-header">
        <h4 class="box-title">
        </h4>
      </div>
      <div class="box-body">
        <div id="primero"></div>
        <div class="sonata-ba-collapsed-fields">


          <div class="col-md-3">
            <div class=" sonata-ba-field sonata-ba-field-standard-natural  ">
              <select id="gg" value=0>
                                                 <option value=0 >seleccione</option>
                                                <option value="volvo">Volvo</option>
                                                <option value="saab">Saab</option>
                                                <option value="mercedes">Mercedes</option>
                                                <option value="audi">Audi</option>
                                        </select>
            </div>
            <div>
              <select id="ggg" value=0>
                                        <option value=0 >seleccione</option>
                                        <option value=1>bueno</option>
                                        <option value=2>malo</option>
                                        <option value=3>regular</option>
                                        <option value=4>excelente</option>
                                    </select>
            </div>


            <div class="row-fluid" style="margin-top: 10px;">
              <div class="span12" align="right">
                <button type="button" class="btn btn-success btn-sm" data-toggle="modal" data-target="#miModal"><i class="fa fa-plus-circle" aria-hidden="true"></i> Agregar Detalle</button>

              </div>
            </div>




            <!-- Codigo para lanzar la modal -->
            <div class="modal fade" id="miModal" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true">
              <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" id="myModalLabel">Agregar Criadero</h4>
                  </div>
                  <form id="newCriadero" action="javascript:void(0);">
                    <div class="modal-body">
                      <div class="box box-primary">
                        <div class="row">
                          <div class="box-header">
                            <h4 class="box-title">
                            </h4>
                          </div>
                          <div class="box-body">
                            <div class="col-md-4">
                              <div class="form-group has-feedback">
                                <div class="input-group">
                                  <label>Canton:</label>
                                  <input type="text" class="form-control" id="canton" name="canton" required>
                                </div>
                                <span class="glyphicon form-control-feedback" aria-hidden="true"></span>
                              </div>
                              <div class="form-group has-feedback">
                                <div class="input-group">
                                  <label>Casas Inspeccionadas:</label>
                                  <input type="number" class="form-control" id="casa_insp" name="casa_insp" required/>
                                </div>

                              </div>
                              <div class="form-group">
                                <label>Casas Positivas:</label>
                                <input type="number" class="form-control" id="casa_pos" name="casa_pos" required>
                              </div>
                              <div class="form-group">
                                <label>Total Instradomiciliar:</label>
                                <input type="number" class="form-control" id="total_intra" name="total_intra">
                              </div>
                              <div class="form-group">
                                <label>Total Anopheles Instradomiciliar:</label>
                                <input type="number" class="form-control" id="anopheles_intra" name="anopheles_intra">
                              </div>

                            </div>
                          </div>
                        </div>
                      </div>
                    </div>
                    <div class="modal-footer">
                      <button type="button" class="btn btn-secondary" data-dismiss="modal">Cerrar</button>
                      <button type="submit" class="btn btn-success" id="agregarDetalle" name="agregarDetalle">Agregar</button>
                    </div>
                  </form>
                </div>
              </div>
            </div>

Tu Respuesta

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

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