Problema con validacion y envio de formulario con jquery y ajax

novatus · #1 (**permalink**) 20/05/2014, 00:06

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

Código:

$("#formid").hide();

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!';
?>

Alexis88 · #2 (**permalink**) 20/05/2014, 00:47

Justo después de mostrar al <div> de id 'Ok', ocultas al formulario que lo contiene. Lo mejor sería que saques al <div> del formulario y lo pongas en cualquier otra parte, antes o después del formulario pero no dentro de él. Recuerda que si ocultas a un elemento, también ocultas a todos los elementos que este contenga.

Saludos

novatus · #3 (**permalink**) 20/05/2014, 11:22

Tienes razón, no se como se me paso :)

Muchas gracias ya que funciona correctamente empezaré a adaptarlo a lo que necesito.