Fernando Román Fernando Román - 3 months ago 11
Ajax Question

validate forms with ajax

Im validating forms with ajax, but after validation, alerts messages dont work, I dont know if problem is in function .done (Jquery) or PHP page.

I hope you can help me, Thanks.



Hola, estoy validando formularios de una página con ajax, pero después del envío del formulario, no se muestran los mensajes de alerta que tengo configurados. No sé si es problema de la función de jQuery(.done) o del código en PHP que envía los datos por post.
Gracias por la ayuda.

HTML (crform21, crform22, crform23, crform44...)

<form class="formus" id="crform21" name="crform21" method="post">
<div class="crintro">Hola <strong>Fast</strong>, estás a punto de enviar una Cita Rápida a <strong>Maiers</strong> , rellena todos los campos y cruza los dedos para que
acepte. Hoy puede ser un Gran Día!</div><br>
<h6><i class="icon-home"></i> Lugar de la Cita*</h6>
<input type="text" value="" maxlength="250" name="crsite" id="crsite">
<div id="addr">
<div style="width: 50%">
<h6><i class="icon-home"></i> Calle*</h6>
<input type="text" value="" maxlength="250" name="crstreet" id="crstreet">
</div>
<div style="width: 50%">
<h6> Número</h6>
<input type="text" value="" maxlength="10" name="crnumber" id="crnumber">
</div>
</div>
<h6><i class="icon-home"></i> Ciudad*</h6>
<input type="text" value="" maxlength="250" name="crcity" id="crcity">
<h6><i class="icon-home"></i> Código Postal</h6>
<input type="text" value="" maxlength="250" name="crcpostal" id="crcpostal">
<h6><i class="icon-calendar"></i> Fecha de la cita (DD-MM-AAAA HH:mm)*</h6>
<input type="text" name="crfecha" id="crfecha" class="datepicker">
<h6><i class="icon-lock"></i> Palabra secreta*</h6>
<input type="text" value="" maxlength="250" name="crsecret" id="crsecret">
<h6><i class="icon-comments"></i> Plan de la cita</h6>
<textarea rows="3" cols="20" name="crcomentario" id="crcomentario"></textarea><br>
<input type="hidden" value="21" name="idreceptor">
<input type="hidden" value="1" name="idcitador">
<input type="hidden" value="Maiers" name="namereceptor">
<input type="hidden" value="Fast" name="namecitador">
<input type="hidden" value="http://www.fastdate.es/profile/easyloveadmin/" name="urlcitador">
<input type="submit" value="Enviar cita" data-id="21" class="rating-button">
</form>


PHP

//Si no se han rellenado todos los datos obligatorios o se intenta acceder al archivo sin estar logueado

if(empty($lugar)){
$errores['lugar'] ='Tienes que introducir un lugar para la cita';
}
if(empty($calle)){
$errores['calle'] ='Tienes que introducir una calle para la cita';
}
if(empty($ciudad)){
$errores['ciudad'] ='Tienes que introducir una ciudad';
}
if(empty($fecha)){
$errores['fecha'] ='Tienes que introducir una fecha';
}
if(empty($pass)){
$errores['pass'] ='Tienes que introducir una palabra secreta';
}

if(empty($errores)){


//Conexión Base de Datos

include('conexion.php');

//Guardamos la cita

$grabarcita = mysql_query (
"INSERT INTO wp_posts (post_author, post_date, post_date_gmt, post_content, post_title, post_status, comment_status, ping_status, post_password, post_name, post_parent, menu_order, post_type) " .
"VALUES ('$citador','$hoy', '$hoy', '$contenido', '$title', '$publish', '$comment', '$pingst', '$pass', '$pname', '$parent', '$order', '$type')") or die (mysql_error());

$grabarcitatabla = mysql_query (
"INSERT INTO wp_citas (citador, idcitador, receptor,idreceptor, fecha, nomcita, passpriv, urlcita, estado, fechacita) " .
"VALUES ('$namecitador','$citador', '$namereceptor', '$receptor', '$hoy', '$title', '$pass', '$urlcita', '$status', '$fecha')") or die (mysql_error());

$datos['exito'] = true;
$datos['mensaje'] = 'El registro se ha realizado correctamente.';

//Enviamos Email de alerta de la cita a la persona citada

include('sendmail.php');

//Se cierra conexión con la Base de Datos

mysql_close($link);

}else{
$datos['exito'] = false;
$datos['errores'] = $errores;
}

//Dar respuesta

echo json_encode($datos);


I have this but function .done does not work

jQuery(document).ready(function($){

var form = $('.formus');

var url = '/controladores/grabarcita.php';

var data = form.serialize();

$(form).on('submit', function(e){
e.preventDefault();

$.ajax({
type : 'POST',
url : url,
data : $(this).serialize(),
dataType: 'json',
encode : true
})
.done(function(datos){
//Especificamos las respuestas para los datos recibidos
if(datos.exito){
alert(datos.mensaje);
}else{
if(datos.errores.lugar){
alert(datos.errores.lugar);
}
if(datos.errores.calle){
alert(datos.errores.calle);
}
}

});

});
});

Answer

it appears as though data gets the wrong value, because you initialize it outside your form handler, so you you're sending all form data to your php file. try instead serializing the form you're processing (using $(this).serialize() in the onSubmit handler) and using that as data:

$(form).on('submit', function(e){
        e.preventDefault();  

        $.ajax({        
        type    : 'POST',
        url     : url,
        // make sure you're sending this form's data!
        data    : $(this).serialize(),
        dataType: 'json',
        encode  : true      
        })  
        .done(function(datos){
        //Especificamos las respuestas para los datos recibidos
        if(datos.exito){
            alert(datos.mensaje);
        }else{
            if(datos.errores.lugar){
                alert(datos.errores.lugar);
            }
            if(datos.errores.calle){
                alert(datos.errores.calle);
            }
        }

        });

    });

now you should be sending the appropriate data over. otherwise the logic seems sound, although i didn't test it.

good luck!