Formularios
Obtener valores de los campos Valores múltiples Previsualizar imagen Usando FormData

<< Eventos Plantillas HTML >>

En esta sección veremos las diferentes maneras que tenemos de obtener los valores de un formulario. Se debe procesar el envío del formulario a partir de su evento submit, sin recargar ni redirigir a otra página. Para ello es importante llamar al método preventDefault() del evento nada más empezar. De esta manera anulamos el comportamiento por defecto (recargar la página).

Obtener valores de los campos

El valor de un campo de cualquier formulario se obtiene a partir de la propiedad value del mismo. Hay varias maneras de acceder al campo del formulario. Utilizar la id para acceder al mismo es innecesario, ya que desde el objeto del formulario se puede hacer utilizando el valor del atributo name.

<form id="formProducto">
    <p><input type="text" name="nombre" id="nombre" placeholder="Nombre" required></p>
    <p><input type="text" name="descripcion" id="descripcion" placeholder="Descripcion" required></p>
    <button type="submit">Añadir</button>
</form>

Valores múltiples

A la hora de recoger valores de controles como input[type=checkbox] agrupados por un mismo name, o de listas de selección múltiple, el atributo value no servirá. En este caso al acceder al elemento por el nombre, nos devolverá una colección de elementos (RadioNodeList). Si queremos obtener los valores, por ejemplo, como un array de cadenas, tendremos que recorrer la colección filtrando los elementos que están seleccionados (checked).

<form id="formPersona">
  <p><input type="text" name="nombre" id="nombre" placeholder="Nombre" required></p>
  <p>
    Aficiones:
    <input type="checkbox" name="hobbies" value="tenis"> Tenis
    <input type="checkbox" name="hobbies" value="comer"> Comer
    <input type="checkbox" name="hobbies" value="viajar"> Viajar
    <input type="checkbox" name="hobbies" value="caminar"> Caminar
  </p>
  <button type="submit">Añadir</button>
</form>

Previsualizar imagen

Si tenemos un input de tipo archivo para seleccionar una imagen, y queremos previsualizar el contenido de la misma en un elemento <img> de la página, tenemos 2 opciones.

La primera sería serializarla en base64. Este es un formato que permite representar cualquier contenido binario en formato texto utilizando un conjunto de 64 caracteres. La imagen ocupará un poco más pero podremos enviarla a un servidor por ejemplo, serializada dentro de un objeto JSON junto al resto de campos del formulario (si el servidor requiere ese formato para transferir datos).

<form id="formPersona">
  <p>Nombre: <input type="text" name="nombre" placeholder="Nombre" required></p>
  <p>Avatar: <input type="file" name="avatar" required accept="image/*"></p>
  <p><img src="" alt="" id="imgPreview"></p>
  <button type="submit">Añadir</button>
</form>

La segunda forma es usar createObjectURL, y la veremos a en la siguiente sección.

Usando FormData

Si nuestro servidor admite datos en formato multipart/form-data, podemos utilizar el objeto FormData para recoger toda la información del formulario, incluyendo campos de varias opciones o de tipo archivo. Es una colección parecida a Map donde se almacenar los valores en formato clave/valor.

Si queremos acceder a los valores almacenados, usaremos el método get, y para valores múltiples getAll. Si queremos previsualizar archivos de imagen sin tener que transformarlos previamente a Base64 (porque no necesitamos enviar un objeto JSON), podemos utilizar URL.createObjectUrl para generar una url a una representación interna del archivo (no es la ruta al archivo), que permite visualizar la imagen. Pero hay que liberar la memoria de dicha representación una vez cargada la imagen, ya que si no, hasta no cerrar el documento actual no se liberaría.