Tengo un formulario en una pagina html que es enviado a un archivo php. Mi idea es que una vez que se envíe el formulario y hasta que se carguen los datos en el php, se muestre una animación en pantalla.
El problema es que la animación no esta mostrando.
El archivo html es el siguiente
<html>
<head>
<meta charset="UTF-8">
<title>load</title>
<script type="text/javascript" src="js/jquery.js"></script>
<style>
#cargando,#carga{
text-align: center;
}
</style>
</head>
<body>
<form id=create method=POST action=archivo.php>
<input type=text name=nombre>
<input type="submit" value="Create" />
</form>
<div id='cargando' style='display:none'>
<img src="load.gif" ><h3>Cargando página ...</h3>
</div>
<div id=cargado></div>
</body>
</html>
<script>
$(document).on("submit", "form", function(event)
{
event.preventDefault();
$('#cargando').show();
var url=$(this).attr("action");
$.ajax({
url: url,
type: 'POST',
dataType: "JSON",
data: new FormData(this),
processData: false,
contentType: false,
success: function (data, status)
{
$('#cargando').hide();
$('#cargado').html(data); //content loads here
},
error: function (xhr, desc, err)
{
console.log("error");
}
});
});
</script>
Y archivo.php es:
<?php
sleep(3);
echo $_POST['nombre'];
?>
$('#cargando').show();
sí se muestra? – ffflabs el 27 nov. 17 a las 18:27<form>
ni el tag<h3>
. Puede que sea irrelevante, pero mejor probar con un HTML correcto. – ffflabs el 27 nov. 17 a las 18:28