BLOQUEAR VENTANA Y MOSTRAR "ESPERANDO" EN PROCESO DE FORM
Dos formas de disparar un form, bloqueando el redisparo apantallando la página y mostrando un gif
animado. Evita así doble envío de emails o múltiples registros en base de datos.
<head>
<script src="../scripts/jquery-3.6.4.min.js"></script>
<?php
if($_POST) {
sleep(2);
$mensaje="Se ejecutó el form";
}else{
$mensaje="Por ahora el form no se manda";
}
?>
<script>
$(document).ready(function(){
//centrador
jQuery.fn.center = function () {
this.css("position","absolute");
this.css("top", Math.max(0, (($(window).height() - $(this).outerHeight()) / 2) +
$(window).scrollTop()) + "px");
this.css("left", Math.max(0, (($(window).width() - $(this).outerWidth()) / 2) +
$(window).scrollLeft()) + "px");
return this;
}
//fin centrador
$("#ejecutar").click(function(event){
if (confirm("Está seguro de esta operación?\n NO podrá deshacerla ")){
$("#sombra").css("height", $(document).height());
$("#sombra").css("width", $(document).width());
$("#sombra").css("visibility","visible");
$("#esperando").center();
$("#esperando").css("visibility","visible")
return true;
} else{
event.preventDefault();
}
});
//inicio envio form por change dropdownlist
$("#categoria").change(function () {
if($('#categoria').val()!='seleccione'){
$("#mensaje").css("visibility","hidden");
$("#sombra").css("height", $(document).height());
$("#sombra").css("width", $(document).width());
$("#sombra").css("visibility","visible");
$("#esperando").center();
$("#esperando").css("visibility","visible")
$("#items").submit();
}else{
$("#mensaje").css("display","block");
}
});
});
</script>
<style>
#sombra{
width:10px;
height:10px;
background-color:#666666;
opacity:0.4;
position:absolute;
left:0; top:0;
z-index:100;
visibility:hidden;
}
#esperando{
width:200px;
height:50px;
padding-top:20px;
text-align:center;
background-color:#FFFFFF;
position:absolute;
left:0;
top:0;
z-index:101;
visibility:hidden;
}
</style>
</head>
<body>
<div style="margin:0 auto; margin-top:50px; text-align:center;">
<form id="items" method="post" action="<?php echo htmlspecialchars($_SERVER["PHP_SELF"]);?>" >
<div>
<input type="Submit" name="Submit" value="EJECUTAR" style="margin-left:10px;" id="ejecutar" />
</div>
<div style="margin-top:20px; ">
<select name="cate" id="categoria" >
<option value="seleccione">--seleccione--</option>
<option value="1">primero</option>
<option value="2">segundo</option>
<option value="3">tercero</option>
</select>
<span id="mensaje" style="display:none; ">DEBE SELECCIONAR ALGUN ITEM</span>
</div>
</form>
<div style="margin-top:20px ;">
<?php echo $mensaje; ?>
</div>
</div>
<div id="sombra">
</div>
<div id="esperando">
<div>
<img src="esperando.gif" />
</div>
<div class="textonormal" style="padding-top:5px; ">
Espere, procesando...
</div>
</div>
</body>