En Firefox y Chrome, no se envían los campos de formulario creados dinámicamente con AJAX

A lo largo de su vida, un desarrollador se encuentra a veces con problemas muy poco comunes y, normalmente, encontrar la solución se convierte en un largo y tortuoso camino.

El problema que trata este post es de uno de esos casos de comportamientos "raros" entre distintos navegadores. El escenario sería el siguiente:

Tenemos una página PHP en la que tenemos un formulario HTML, cuyos campos son creados dinámicamente utilizando una función AJAX. El HTML resultante tendría un aspecto similar a este:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "https://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="https://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<title>Test</title>
</head>

<body>
<table>
<form action="test.html">
<tr>
<td>
<fieldset>
<input type="text" name="nombre1" id="id1" />
<input type="text" name="nombre2" id="id2" />
</fieldset>
</td>
</tr>
</form>
</table>
</body>

</html>

Donde los elementos input son creados por AJAX. Hasta ahí todo perfecto, pero si hacemos un submit del formulario vemos que sólo en Internet Explorer se pasan los valores. En Chrome y en Firefox es como si esos "inputs" no existieran.

Después de mucho comprobar el funcionamiento de nuestra función AJAX o del PHP, observaríamos que todo está correcto, pero seguimos sin poder recuperar los valores tras enviar el formulario.

Sin embargo... el problema se encuentra en el HTML, concretamente en el orden de las etiquetas. Dependiendo del doctype que tengáis definido en vuestro documento, se ha de formar un HTML que sea estándar para ese doctype.

Para comprobar si nuestro HTML cumple los estándares, podemos utilizar la herramienta de validación online que nos proporciona w3.org. Por el contrario, si aún no tenemos nuestra página online, podemos usar alguna de las extensiones que tenemos disponibles para Firefox o Chrome. Por ejemplo, la validación en local es una de las herramientas que ofrece la extensión Web Developer para Firefox.

Si usamos alguna de estas herramientas para validar nuestro código obtenemos el siguiente error:

Line 10, Column 33: document type does not allow element "form" here

Lo que significa que según los estándares no podemos colocar la etiqueta form donde la tenemos puesta. Si simplemente cambiamos el HTML y hacemos que el formulario englobe a la tabla, nos queda algo como esto:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "https://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="https://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<title>Test</title>
</head>

<body>
<form action="test.html">
<table>
<tr>
<td>
<fieldset>
<input type="text" name="nombre1" id="id1" />
<input type="text" name="nombre2" id="id2" />
</fieldset>
</td>
</tr>
</table>
</form>
</body>

</html>

Si ahora pasamos el validador, obtendremos el feliz mensaje de:

This document was successfully checked as XHTML 1.0 Strict!

Lo cual quiere decir que nuestro HTML sigue los estándares. Pero no sólo hemos logrado que sea estándar, si no que si ahora mandamos el formulario... ¡sorpresa! en Firefox y en Chrome ahora sí que se envían los datos. Por tanto, el problema no estaba en la parte compleja (AJAX o PHP) de nuestro desarrollo, si no en lo que, aparentemente, es más sencillo y teníamos totalmente controlado: el HTML.

En conclusión, seguir unos patrones y mantener nuestro código estándar nos puede ahorrar más de un disgusto y horas de búsqueda y desesperación. Este tipo de errores "raros" son los peores, porque parece que no hay sentido para que se produzcan.

Lo que, en principio, parecía un complejo problema de AJAX, ha resultado ser un sencillo problema de estándares HTML, y, en este caso,  seguirlos ha sido suficiente para solucionarlo. Quizá no siempre sea posible cumplirlos a rajatabla, pero lo mejor es hacerlo siempre que esté en nuestra mano.

Esperamos que con esta entrada podáis tachar este error de vuestra lista de errores "raros" con distintos navegadores.

9 Respuestas

  1. Juan Carlos

    Gracias llevaba todo el dia buscando la solucion pero no sabia como formular la pregunta

  2. Oswaldo

    Gracias por compartir.. Llevaba también 4 Días tratando de descifrar el “misterio” y era algo tan “sencillo”!!!

  3. Elis

    Gracias… le daba una y mil vueltas y al final era ese el problema… Mil gracias.

  4. Soytecno

    Mil gracias, llevaba 4 días tratando de resolver ese problema. Siempre es bueno saber cual tornillo se debe ajustar cuando las cosas no funcionan.

  5. Felipe

    muchas gracias, no pensé que pudiera ser eso

  6. Vectoraula

    Muchas gracias, es la típica chorrada que puede volver loco a cualquiera.

  7. Beli

    Genial el post! Llevo 5 días intentando averiguar cuál era el fallo y por qué en mi formulario el Submit no funcionaba en Firefox… mientas si que lo hacía en IE. En ningún momento se me pasó por la cabeza que el error estuviera en el HTML. Mil gracias por vuestra ayuda. 🙂

    • Gracias por ayudarme a resolver mi problema. Saludos

      Excelente ayuda, me evito trabajar de mas.

  8. julio salsavilca

    Hola
    muy bueno el post.
    quisiera que m ayudaran tengo un problema parecido al que mencionaste, pero esta ves son con combos cargados con ajax, lo que pasa es que si lo ejecuto en IE normal m cartura los valores del los combos, pero si lo ejecuto con Firefox o Chrome no m captura los valores.
    espero que me puedan ayudar con este problema gracias .

Responder a Juan Carlos