Fernando Román Fernando Román - 3 months ago 15
PHP Question

Select form between multiple forms to validate them with ajax

I have multiple forms like this in a php page. I want to know How I can select a individual form with jquery to validate them with ajax.

I only need the code for the select form in jquery, I will try the validation with ajax after.

I hope you can help me, Thanks.



Hola, tengo un sitio web con varios formularios identificados por su id dentro de una misma página, la id se genera por php... y me gustaría saber el código para validarlos con ajax, pero primero, necesito saber cómo puedo seleccionarlos individualmente para que sólo me valide el formulario que estoy sleccionando y enviando.
Gracias por la ayuda.

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

<form 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 It 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!