Hoy mientras desarrollaba un formulario y comprobaba los datos que enviaba me he dado cuenta de algo que en todos los años que llevo programando no me había dado cuenta, o quizá no me había visto en esa situación. Explico el escenario, tengo un formulario en el cual pongo un rango de fechas y luego en otro campo tengo un autocompletar el cual cuando marco la selección, se queda el nombre en el campo visible y el id en un campo hidden. Al darle a buscar pues me busca los datos relacionados de ese id en ese rango de fechas. Pues bien, a la vez del botón enviar, he puesto un botón reset para limpiar el formulario, y me he dado cuenta que si por ejemplo buscaba solo entre rangos de fechas, sin buscar nada en el autocompletar, me buscaba filtrando por los datos anteriores.
Depurando he visto que si no ponía nada en el campo autocompletar ( el cual al cambiar establecía el valor en el campo hidden) este se mantenía con el valor establecido en la búsqueda anterior.
A esto uno se pregunta ¿el reset no lo borraba todos los datos de un formulario?, pues la respuesta es si y no.
Vamos en la documentación de la w3.org que nos dice acerca del estado hidden en los inputs
«El estado hidden representa un valor el cual no esta permitido que el usuario lo examine o lo manipule».
Y la definición de reset dice «El estado reset de un button representa un button que cuando se activa restablece el formulario».
Con estas definiciones, de primeras pensaríamos que no tiene sentido que al pulsar el reset no se restablezcan los valores de un hidden, pero reflexionemos un momento y hagamosnos una pregunta ¿quien establece el valor del campo hidden? ¿el usuario? ¿o nosotros con una programación? La respuesta es la segunda, el usuario no establece el valor del campo hidden ni lo puede modificar, y la acción del reset la efectúa el usuario, por lo tanto, no puede modificar el valor del hidden.
Para solucionar esto, si estamos usando jQuery podemos hacerlo de una manera muy sencilla
$('button[type=reset]').click(function(){
$('#idCampoHidden').val('');
});
En este ejemplo estoy usando button, y serviria igual poniendo input[type=reset] y luego en el nombre del campo, donde pone #idCampoHidden, lo sustituiremos por #nuestrocampohidden.
El estado hidden http://www.w3.org/community/webed/wiki/HTML/Elements/input/hidden
El estado reset http://www.w3.org/community/webed/wiki/HTML/Elements/input/reset
rubenlacasa.es 