Hola a todos..
Espero que me puedan ayudar con este problemilla:
Tengo dos archivos llamados..
index.html y un procesa.php
En el index.html tengo un formulario que a la hora de enviar los datos me sale una imagen "Cargando" mientras se ejecuta el procesa.php como tengo varias consultas....
pero quisiera que me redireccione al archivo que declare en el jquery, solo sale la imagen cargando y luego me deja en el mismo formulario.. en este caso quisiera que despues de cargar me lleve a "procesa.php" mostrandome todo los datos
PD: hice esto porque tengo varias consultas en el archivo procesa.php y se demora.. para eso puse un gif de cargando.. Simule el tiempo en el procesa
Este es mi codigo...
Index.html
Código:
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js"></script>
<script type="text/javascript">
$(document).ready(function() {
$('#form').submit(function(event) {
var datos = $(this).serialize();
event.preventDefault()
$.ajax(
{
url:'procesa.php',
type:'POST',
data:datos,
beforeSend:function(objeto){
$('#carga').css({display:'block'});
},
complete:function(){$('#carga').css('display','none');}
});
});
});
</script>
</head>
<body>
<div id="formulario">
<form id="form">
<fieldset>
<legend>Registrarse</legend>
<div class="medidas">
<label for="user">Usuario:</label>
<input id="user" name="user">
</div>
<div class="medidas">
<label for="pass">Contraseña:</label>
<input type="password" id="pass" name="pass">
</div>
</fieldset>
<div>
<input type="submit" value="Enviar" />
</div>
</form>
</div>
<div id="carga" style="display:none">
<img src="loading.gif" />
</div>
</body>
</html>
procesa.php
Código:
<?php
sleep(5);
/* LINEA DE CONSULTAS ... */
echo "USER RECIBIDO: ".$_POST['user'];
print_r($_POST);
?>