Procesar multiples formularios en un solo archivo PHP y con una sola función AJAX (jq Hola, buenos días. Escribo esperando que me ayuden con un problema en el que llevo varios días atorado, no se si lo estoy atacando de la mejor forma o si no es la correcta y por eso me encuentro con el siguiente problema. Les cuento:
Estoy haciendo un quiz de 5 preguntas, cada pregunta se tiene que calificar al instante para decirle al usuario si fue correcta o incorrecta su respuesta, así que decidí poner una pregunta por form y así sucesivamente, es decir:
//Pregunta 1
<form id="pregunta1" name="pregunta1">
<h2> 12 + 7 = </h2>
<input type="radio" name="option1" value="13"> a) 13
<input type="radio" name="option1" value="19"> a) 19
<input type="radio" name="option1" value="23"> a) 23
<button type="submit" id="submit1" class="enviar"> Calificar </button>
<div class="respuesta"></div>
</form>
//Pregunta 2
<form id="pregunta2" name="pregunta2">
<h2> ¿Qué número es este [11] </h2>
<input type="radio" name="option2" value="Diez"> a) Diez
<input type="radio" name="option2" value="Veintiuno"> a) Veintiuno
<input type="radio" name="option2" value="Once"> a) Once
<button type="submit" id="submit2" class="enviar"> Calificar </button>
<div class="respuesta"></div>
</form>
...
Y así hasta llegar al form 5. Cada formulario los estaba enviando por medio de ajax-jquery y procesando a un archivo php, es decir, al final del ejercicio tenía 1 archivo html con 5 forms, 5 funciones ajax (1 para cada pregunta) y 5 archivos en PHP que procesaban los elementos enviados por ajax (igual uno por cada form).
El problema fue que esta página tendrá muchas preguntas en bloques y si seguía a ese paso me llenaría de archivos y funciones por lo que decidí optimizar un poco y reduje de una llamada ajax por pregunta (y obvio por form) a una función que pudiera calificar todos los form de un documento, quedando del siguiente modo:
$(document).ready(function(){
current_form = 0; /* Variable que sirve para enviar desde el form[0] hasta el form[4] con selector :eq de jquery */
current_answer = 0; /* Variable que sirve para mostrar la respuesta desde el div respuesta[0] hasta el respuesta[4] con selector :eq de jquery */
$('.enviar').on('click',function(){
$('form:eq('+current_form+')').submit();
current_form = current_form + 1;
current_answer = current_answer + 1;
});
$('form:eq('+current_form+')').submit(function(e) {
e.preventDefault();
$.post("../../../../../dist/php_files/processing.php", $('form:eq('+current_form+')').serialize(), function(data){
$('.respuesta:eq('+current_answer+')').html(data.respuesta_feed);
},"json");
});
});
No se si entienda mi código y mi lógica pero les explico: Lo que hice fue recorrer el documento buscando los 5 formularios
empezando desde el form[0] hasta el form[4] con el selector eq y lo mismo hice para mostrar las respuestas ya que tengo 5 div con la clase respuesta y necesitaba decir que cuando se calificará el form[0] me mostrar la respuesta en el div respuesta[0] (que es el que le corresponde a este form y así sucesivamente).
Hasta aquí todo bien, logré reducir significativamente el código y recorrer los formularios con sus respuestas, el problema fue cuando intente juntar los procesos que evalúan las respuestas en un solo archivo PHP.
Anteriormente, cuando evaluaba los forms por separado mis archivos PHP estaban como este:
if (isset($_POST['option1']))
{
$respuesta = $_POST['option1'];
}
if($respuesta == '19')
{
echo json_encode(array("respuesta_feed"=>"Correcto!"));
}
else
{
echo json_encode(array("respuesta_feed"=>"Incorrecto!") );
}
Obviamente este código se repetía en 5 documentos diferentes de PHP, intente juntar 2 de ellos quedando de la siguiente manera:
if(isset($_POST['id_formulario'])){
if($_POST['id_formulario']=='form_1'){
if (isset($_POST['option1']))
{
$respuesta = $_POST['option1'];
}
if($respuesta == '19')
{
echo json_encode(array("respuesta_feed"=>"Correcto!"));
}
else
{
echo json_encode(array("respuesta_feed"=>"Incorrecto!") );
}
}
} else
if(isset($_POST['id_formulario'])){
if($_POST['id_formulario']=='form_2'){
if (isset($_POST['option2']))
{
$respuesta = $_POST['option2'];
}
if($respuesta == 'Once')
{
echo json_encode(array("respuesta_feed"=>"Correcto!"));
}
else
{
echo json_encode(array("respuesta_feed"=>"Incorrecto!") );
}
}
}
Leí en alguna parte que metiendo en cada form un <input type="hidden"> con el cual pudiéramos identificar de que formulario se trataba podríamos procesar varios formularios en php en un solo documento a traves de un if-else como el que agregue en mi código de arriba, mi input quedó de la siguiente forma en los formularios 1 y 2 respectivamente:
<input type="hidden" id="Q1" name="id_formulario" value="form_1">
<input type="hidden" id="Q2" name="id_formulario" value="form_2">
Resulta que me evalúa correctamente la primera pregunta que al ir a la siguiente y enviar mi respuesta no hace nada y además "vomita" los datos en la barra de direcciones en esta forma:
www.miquiz.com/quiz1.php?id_formulario=form_2&option2=Once
¿Por qué esta sucediendo esto? He probado muchas formas pero ninguna me ha resultado. Espero que puedan ayudarme, estaría encantado de leer sus sugerencias, soy nuevo en esto de la web y quiero aprender a hacer las cosas de la mejor forma. ¡Muchas gracias!
