¿Cómo restablecer (borrar) el formulario a través de JavaScript?

123

Lo he intentado $("#client.frm").reset();pero no funciona. Entonces, ¿cómo restablecer el formulario a través de jQuery?

javascript jquery akuzma
fuente
Posible duplicado de stackoverflow.com/questions/680241/blank-out-a-form-with-jquery
svk
66
Nota: Borrar y Restablecer son dos cosas diferentes. Reset ( .reset()) devolverá los valores a los valores originales en el HTML. Para esto, vea la solución de Nick Craver a continuación. "Borrar" generalmente significa volver a establecer los valores en blanco / sin marcar / sin seleccionar; ver la solución MahmoudS.
Lucas

Respuestas:

258

form.reset() es un método de elemento DOM (no uno en el objeto jQuery), por lo que necesita:

$("#client.frm")[0].reset();
//faster version:
$("#client")[0].reset();

O sin jQuery:

document.getElementById("client").reset();
Nick Craver
fuente
44
Mi cerebro se expandió, gracias: "Un objeto jQuery es una envoltura tipo matriz alrededor de uno o más elementos DOM. Para obtener una referencia a los elementos DOM reales (en lugar del objeto jQuery), tiene dos opciones. La primera (y el método más rápido) es usar la notación de matriz: $ ("#foo") [0]; // Equivalente a document.getElementById ("foo") El segundo método es usar la función .get (): $ ("#foo ") .get (0); // Idéntico al anterior, solo que más lento". learn.jquery.com/using-jquery-core/faq/…
Andrew
Obtengo el siguiente error: TypeError: document.getElementById (...). Reset no es una función [Más información]. Yo uso el plugin FormValidate para el formulario. su resetForm no restablece el formulario también = (¿Alguna sugerencia?
Eugen Konkov
Eugen, aquí es donde, al igual que Indiana Jones y The Last Crusade, debes dar un salto de fe. Si llama a document.getElementById ('myform'). Reset (), en realidad borrará el formulario a pesar de que ese método parece no existir. Típica ofuscación de M $.
Newclique
43

Simplemente puedes hacer:

$("#client.frm").trigger('reset')

usuario2057484
fuente
1
a Triggerme lleva al nuevo mundo
gonatee
17

La solución JS pura es la siguiente:

function clearForm(myFormElement) {

  var elements = myFormElement.elements;

  myFormElement.reset();

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

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

  switch(field_type) {

    case "text":
    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;
  }
    }
}
Mahmoud Saleh
fuente
1
Aquí hay una solución de complemento jQuery que debería ser aproximadamente equivalente. stackoverflow.com/a/24496012/1766230 ( Usé tu selectedIndex = -1truco.)
Luke
55
Esta solución no funciona ahora (en 2016). Cuando el formulario tiene valores predeterminados para las entradas de texto, contraseña y área de texto, debe usar elementos [i] .defaultValue = "" en lugar de elementos [i] .value = "".
Andrew F.
var field_type = elements[i].type.toLowerCase();
Martynas Januškauskas
@ Andrew: Depende de lo que quieras. Si solo desea restablecer el formulario a la defaultValues, puede llamar reset()al objeto de formulario. El código aquí es borrar el formulario, en lugar de restablecerlo.
Protector uno
4

Restablecer (Borrar) formulario a través de Javascript& jQuery:

Javascript de ejemplo:

document.getElementById("client").reset();

Ejemplo jQuery:

Puede intentar usar el trigger() enlace de referencia

$('#client.frm').trigger("reset");
Gaurang P
fuente
4

Tenga en cuenta que la función form.reset()no funcionará si alguna etiqueta de entrada en el formulario tiene un atributoname='reset'

alexbobroff
fuente
2

Prueba esto :

$('#resetBtn').on('click', function(e){
    e.preventDefault();
    $("#myform")[0].reset.click();
}
Hazem_M
fuente
2

Borrar el formulario de la siguiente manera

document.forms[0].reset();

Simplemente puede borrar los elementos del formulario dentro del grupo. Al usar esto forms[0].

Nagaraju Vuppala
fuente
1

Usar la función de JavaScript reset():

document.forms["frm_id"].reset();
Felix Bagur
fuente
1

Puedes usar lo siguiente:

$('[element]').trigger('reset')
Solo aprendiendo
fuente
0

Prueba este código. Una solución completa para su respuesta.

    <!DOCTYPE html>
<html>
<head>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script>
<script>
$(document).ready(function(){
    $(":reset").css("background-color", "red");
});
</script>
</head>
<body>

<form action="">
  Name: <input type="text" name="user"><br>
  Password: <input type="password" name="password"><br>
  <button type="button">Useless Button</button>
  <input type="button" value="Another useless button"><br>
  <input type="reset" value="Reset">
  <input type="submit" value="Submit"><br>
</form>

</body>
</html>
Jaffer Wilson
fuente
-1

Puede borrar todo el formulario utilizando la función onclick. Aquí está el código para ello.

 <button type="reset" value="reset" type="reset" class="btnreset" onclick="window.location.reload()">Reset</button>

La función window.location.reload () actualizará su página y todos los datos se borrarán.

Arjun
fuente