Limpiar o resetear formularios en JS

Para limpiar un formulario con JavaScript tienes dos caminos: form.reset(), que devuelve cada campo a su valor inicial, o una función propia que vacía absolutamente todo. No son lo mismo: si un campo trae value="Alexander" en el HTML, reset() lo restaura y limpiar lo deja en blanco.

Puedes probar las dos en la demo interactiva de este artículo.

Reset form

Para resetear formularios existe un método de los forms:

::javascript
document.getElementById("test-form").reset();

Clear form

Para limpiar formularios en cambio, tenemos que escribir nuestra propia función, como por ejemplo¹:

::javascript
function clearForm(oForm) {

  var elements = oForm.elements;

  oForm.reset();

  for(i=0; i<elements.length; i++) {

    field_type = elements[i].type.toLowerCase();

    switch(field_type) {
      case "text":
      case "email":
      case "password":
      case "textarea":
      case "hidden":
        elements[i].value = "";
        break;

      case "radio":
      case "checkbox":
          if (elements[i].checked) {
            elements[i].checked = false;
        }
        break;

      case "select-one":
      case "select-multiple":
        elements[i].selectedIndex = -1;
        break;

      default:
        break;
    }
  }
}

y la llamamos mediante:

::javascript
clearForm(form);

reset y clear no son lo mismo

reset() vuelve a los valores iniciales del HTML; clear deja los campos vacíos. Si el formulario tiene un value por defecto, reset() lo recupera y clear lo borra.

Versión moderna sin jQuery

::javascript
const form = document.querySelector("#test-form");

form.querySelectorAll("input, textarea, select").forEach((field) => {
  if (field.type === "checkbox" || field.type === "radio") {
    field.checked = false;
  } else if (field.tagName === "SELECT") {
    field.selectedIndex = -1;
  } else {
    field.value = "";
  }
});

Para resetear, sigue siendo suficiente con form.reset(). No necesitas jQuery para ninguna de las dos operaciones.

Preguntas frecuentes

¿Por qué no usar solo reset()?

Porque reset() no vacía los campos que tienen un valor inicial: los devuelve a ese valor. Si quieres un formulario completamente vacío, usa la función de limpieza.

¿Cómo limpio solo un campo?

Selecciona el campo y asigna una cadena vacía:

::javascript
document.querySelector("#email").value = "";

¿Por qué form.reset() deja de funcionar de repente?

Porque algún control del formulario se llama reset. El navegador expone los controles como propiedades del formulario, así que un <button id="reset"> o un <input name="reset"> tapa el método form.reset y lo reemplaza por el elemento. El error típico es form.reset is not a function.

La solución es renombrar el control:

::html
<button type="button" id="btn-reset">Reset</button>

Lo mismo pasa con submit, action o method. Si un formulario se comporta raro después de añadir un campo, revisa primero si su name choca con una propiedad del propio formulario.

¿Funciona con campos generados dinámicamente?

Sí, si la función se ejecuta después de crear los campos. querySelectorAll recorre los elementos que existan en ese momento.

Demo

La demo tiene un formulario con textos, checkboxes, radios y selects, y dos botones: uno hace reset() y el otro limpia todo. Sirve para ver la diferencia sin escribir código.

También puedes seguir con el resto de artículos de frontend.