Grcias por la respuesta, pero por mucho punto y coma que ponga sigue igual, no funciona...no recoge los datos de procesar.php e incluso muestra procesar.php como si no hubiese ajax.
si quito del tag form el action y en ajax especifico el archivo sin usar attr, tampoco funciona al hacer submit.
Código PHP:
<form id="f1" method="post">
....
$.ajax({
type : "POST",
url : "procesar.php",
.......
es raro porque al usar el plugin validate de jquery si que funciona bien:
Código PHP:
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title>Page Title</title>
<style type="text/css" rel="stylesheet">
#carga{
display: none;
}
</style>
<script type="text/javascript" src="lib/jquery-1.7.1.js"></script>
<script type="text/javascript" src="lib/jquery.validate.js"></script>
<script type="text/javascript">
$(document).ready(function(){
$("#f1").validate({
rules: {
idname: {
required: true
},
idemail: {
required: true
}
},
messages: {
idname: {
required: "Campo requerido"
},
idemail: "Introduce email",
}
});
})
$.validator.setDefaults({
submitHandler: function() {
$.ajax({
type : "POST",
url : "procesar.php",
data : $("#f1").serialize(),
dataType: "html",
beforeSend: function(){
$("#principal").fadeOut();
$("#carga").fadeIn();
},
success: function(data){
$("#carga").fadeOut();
$("#principal").fadeIn(1000,function(){
alert(data);
});
}
})
}
});
</script>
</head>
<body>
<div id="principal">
<form id="f1">
<label for="idname">Nombre (requerido)</label>
<input type="text" name="idname" id="idname" value="" />
<label for="idemail">E-Mail (requerido)</label>
<input type="text" name="idemail" id="idemail" value="" />
<input class="entrar" type="submit" name="entrar" value="Entrar" />
</form>
</div><!-- final principal -->
<div id="carga">
<img src="img/ajax-loader.gif" /> Cargando...
</div>
</body>
</html>
No entiendo porque así si que funciona pero sin usar el plugin validate y usando solo el evento submit no funciona el ajax...
