Recien estoy aprendiendo ajax y jquery, encontre este código de un formulario con validacion y posterior envio mediante ajax, estaba probando su funcionamiento para despues adaptarlo a mis necesidades.
La validación funciona correctamente pero no consigo ningun resultado con el envio del formulario simplemente me aparece la pantalla en blanco, esto supongo que es por la linea
Pero no se muestran los datos enviados que deberian mostrrse en el <div id=ok> del formulario.
No se exactamente donde radica el error, así que les agradeceria algunas sugerencias.
Dentro de <head>
Código:
<script src="js/jquery.min.js"></script>
<script src="js/jquery.validate.js"></script>
<script type="text/javascript">
$(document).ready(function() {
$("#ok").hide();
$("#formid").validate({
rules: {
name: { required: true, minlength: 2},
lastname: { required: true, minlength: 2},
email: { required:true, email: true},
phone: { minlength: 2, maxlength: 15},
years: { required: true},
message: { required:true, minlength: 2}
},
messages: {
name: "Debe introducir su nombre.",
lastname: "Debe introducir su apellido.",
email : "Debe introducir un email válido.",
phone : "El número de teléfono introducido no es correcto.",
years : "Debe introducir solo números.",
message : "El campo Mensaje es obligatorio.",
},
submitHandler: function(form){
var dataString = 'name='+$('#name').val()+'&lastname='+$('#lastname').val()+'...';
$.ajax({
type: "POST",
url:"send.php",
data: dataString,
success: function(data){
$("#ok").html(data);
$("#ok").show();
$("#formid").hide();
}
});
}
});
});
</script>
Formulario
Código:
<form method="post" id="formid">
<div id="ok"></div>
<p><span>Nombre</span>
<input type="text" name="name" id="name" /></p>
<p><span>Apellidos</span>
<input type="text" name="lastname" id="lastname" /></p>
<p><span>Email</span>
<input type="text" name="email" id="email" /></p>
<p><span>Teléfono</span>
<input type="text" name="phone" id="phone" /></p>
<p><span>Edad</span>
<input type="text" name="years" id="years" /></p>
<p><span>Mensaje</span>
<textarea id="message" name="message" rows="5" cols="53"></textarea></p>
<input type="submit" value="Enviar" />
</form>
Archivo send.php para la prueba
Código:
<?php
echo 'Gracias '.$_POST['name'].' '.$_POST['lastname'].'. La información ha sido enviada correctamente!';
?>