Tengo el siguiente problema tengo un formulario con varios inputs y al presionar el boton abre un modal..todo bien pero necesito que antes de abrir el modal me de un mensaje de alert si 2 de ellos estan vacios y no abra este modal.
Intente con deshabilitar el boton hasta que los 2 inputs esten llenos pero al llenarlos se habilita y al hacer click no me trae el modal recarga la pagina y borra los datos de los inputs adjunto el codigo del formulario ...
Desde ya muchas gracias
<div class="card-body">
<form role="form" name="fr">
<div class="col-md-4 " style="display: none;">
<label class="control-label">IDarea:</label>
<input type="text" class="form-control" maxlength="18" name="idarea" id="idarea" placeholder="Nombre" value="<?php echo $id_area ?>" readonly>
</div>
<div class="col-md-4 " style="display: none;">
<label class="control-label">Iuser:</label>
<input type="text" class="form-control" maxlength="18" name="iduser" id="iduser" placeholder="user" value="<?php echo $id_user ?>" readonly>
</div>
<div class="col-md-4 ">
<label class="control-label">Area destino</label>
<input type="text" maxlength="25"class="form-control" name="dest_sal" id="dest_sal" placeholder="destino" value="" required >
</div>
<div class="col-md-4 ">
<label class="control-label">Receptor:</label>
<input type="text" maxlength="35"class="form-control" name="receptor_sal" id="receptor_sal" placeholder="Receptor" value="" required>
</div>
Agregar Producto Imprimir
ahora agrego el codigo del modal
<div class="modal fade" id="AgregarPro" tabindex="-1" role="dialog" aria-labelledby="myModalLabel">
<div class="modal-dialog modal-lg" 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">Buscar productos</h4>
</div>
<div class="modal-body">
<form class="form-horizontal">
<div class="form-group">
<div class="col-sm-6">
<input type="text" class="form-control" id="filtrar" placeholder="Buscar productos">
</div>
<a href="#" id="bus"><i class='glyphicon glyphicon-search'></i> Buscar</a>
</div>
<div class="outer_div">
<?php
require_once('data/conexion.php');
$sql = "select * from productos where id_area = '$id_area'";
$result = mysqli_query($conn, $sql);
?>
<table id="sampleTable" class="table table-hover table-bordered">
<tbody class="buscar">
<tr class="warning">
<th>Código</th>
<th>Producto</th>
<th>Marca</th>
<th><span class="pull-right">Stock</span></th>
<th><span class="pull-right">Cantidad</span></th>
<th class='text-center' style="width: 36px;">Agregar</th>
</tr>
<?php
while ($row = mysqli_fetch_array($result)) {
$codigo=$row['id_producto'];
$producto=$row['name'];
$marca=$row['marca'];
$stock=$row['stock_actual'];
$cantidad=$row['precio_unidad'];
?>
<tr>
<td><?php echo $codigo; ?></td>
<td><?php echo $producto; ?></td>
<td><?php echo $marca; ?></td>
<td class='col-xs-1'>
<div class="pull-right">
<input type="text" class="form-control" style="text-align:right" id="cantidad_<?php echo $codigo ?>" value="<?php echo $stock ?>">
</div>
</td>
<td class='col-xs-2'>
<div class="pull-right">
<input type="number" min="0" max="<?php echo $stock ?>" class="form-control" name= "cants" id="cants<?php echo $codigo ?>" style="text-align:right" value="">
</div>
</td>
<td class='text-center'>
<a class='btn btn-info'href="#" onclick="agregar(<?php echo $codigo ?>, $('#cants').val(), $('#receptor_sal').val(), $('#dest_sal').val(), $('#idarea').val(), $('#iduser').val() )"><i class="glyphicon glyphicon-plus"></i></a>
</td>
</tr>
<?php
}
?>
</tbody>
</table>
</div><!-- Datos ajax Final -->
</div>
<div class="modal-footer">
<button type="button" class="btn btn-default" data-dismiss="modal">Cerrar</button>
</div>
Ahora agrego la funcion que deshabilita los inputs
<script type="text/javascript">
var btnEnviar = document.getElementById("add_tab");
btnEnviar.disabled = true;
var caja1 = document.getElementById("receptor_sal");
var caja2 = document.getElementById("dest_sal");
caja1.onkeyup = caja2.onkeyup = activarBoton;
function activarBoton() {
if(verificar()) {
btnEnviar.disabled=false
}
else {
btnEnviar.disabled=true
}
}
function verificar() {
if( caja1.value==="")
return false;
if (caja2.value==="")
return false;
return true;
}