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">×</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>