Archivo de la etiqueta: lenguaje html

Obtener el valor seleccionado en un Select con jQuery – jQuery Tips

JQueryUIImaginemos que queremos conocer que valor hay seleccionado en un campo select, para comprobar su valor o lo que necesitemos. Para hacer esto utilizaremos val().


<select id='ciudades' name='ciudades'>

<option value='BAR'>Barcelona</option>

<option value='MAD'>Madrid</option>

<option value='ZGZ'>Zaragoza</option>

</select>

<script>

$('#ciudades').change(function(){

var ciudad = $(this).val()

alert('Has seleccionado ' + ciudad);

});
</script>

En este ejemplo nos aparece un select en el cual nos da la opción de seleccionar entre tres ciudades, cuando cambiemos el valor nos mostrara un mensaje en pantalla en el cual nos mostrara el valor del value de la ciudad seleccionada.

Enhanced by Zemanta
Anuncio publicitario

¿Por que el botón reset no vacia los campos hidden? – HTML Tips

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