Limpiar o resetear formularios en JS

Fragmentos de código para limpiar o resetear formularios en JS. Note que "limpiar" borrará todo el contenido del formulario mientras que "resetear" restaurará los valores iniciales.

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-multi":
        elements[i].selectedIndex = -1;
        break;

      default:
        break;
    }
  }
}

y la llamamos mediante:

::javascript
clearForm(form);

demo

A modo de ejemplo, puede visitar el siguiente link.

El código se puede visualizar en el directorio 'clear-reset-form' del repo

Visto en: javascript-coder.com ↩

Limpiar o resetear formularios en JS

Reset form

Clear form

demo

Comentarios !