Como redefinir (limpar) o formulário através do JavaScript?

123

Eu tentei, $("#client.frm").reset();mas ele não está funcionando. Então, como redefinir o formulário via jQuery?

javascript jquery

— akuzma
fonte

Possível duplicada de stackoverflow.com/questions/680241/blank-out-a-form-with-jquery

— svk

6

Nota: Limpar e Redefinir são duas coisas diferentes. Reset ( .reset()) colocará os valores de volta aos valores originais no HTML. Para isso, consulte a solução de Nick Craver abaixo. "Limpar" normalmente significa definir os valores novamente como em branco / desmarcado / desmarcado; veja a solução MahmoudS.

— 26414 Luke

258

form.reset() é um método de elemento DOM (não um no objeto jQuery), então você precisa:

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

Ou sem jQuery:

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

— Nick Craver
fonte

4

Meu cérebro acabou de expandir, obrigado: "Um objeto jQuery é um invólucro em forma de matriz em torno de um ou mais elementos DOM. Para obter uma referência aos elementos DOM reais (em vez do objeto jQuery), você tem duas opções. A primeira (e O método mais rápido) é usar a notação de matriz: $ ("#foo") [0]; // Equivalente a document.getElementById ("foo") O segundo método é usar a função .get (): $ ("#foo ") .get (0); // Idêntico ao anterior, apenas mais lento." learn.jquery.com/using-jquery-core/faq/...

— Andrew

Eu recebo o próximo erro: TypeError: document.getElementById (...). Reset não é uma função [Saiba mais]. Eu uso o plugin FormValidate para formulário. seu resetForm não redefine o formulário também = (Alguma sugestão? #

— Eugen Konkov 23/10

Eugen, é aqui que, como Indiana Jones e A Última Cruzada, você deve dar um salto de fé. Se você chamar document.getElementById ('myform'). Reset (), ele limpará o formulário mesmo que esse método pareça não existir. Ofuscação típica de M $.

— Newclique 27/03/19

43

Você pode simplesmente fazer:

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

— user2057484
fonte

1

um Triggerme traz ao mundo novo

— gonatee

17

A solução JS pura é a seguinte:

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
fonte

1

Aqui está a solução do plugin jQuery que deve ser aproximadamente equivalente. stackoverflow.com/a/24496012/1766230 (eu usei o seu selectedIndex = -1truque.)

— Lucas

5

Esta solução não funciona agora (em 2016). Quando o formulário possui valores padrão para entradas de texto, senha e área de texto, você deve usar os elementos [i] .defaultValue = "" em vez dos elementos [i] .value = "".

— Andrew F.

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

— Martynas Januškauskas 20/0318

@ Andrew: Depende do que você quer. Se você quiser apenas redefinir o formulário para defaultValues, basta chamar reset()o objeto de formulário. O código aqui é limpar o formulário, em vez de redefini-lo.

— Protector one

4

, o método reset () não limpa os valores padrão e o campo da caixa de seleção e há muitos outros problemas.

Para redefinir completamente, verifique o link abaixo -

http://www.javascript-coder.com/javascript-form/javascript-reset-form.htm

— Alpesh
fonte

4

Reset (Limpar) Forma throught Javascript& jQuery:

Exemplo de Javascript:

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

Exemplo de jQuery:

Você pode tentar usar o trigger() Link de referência

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

— Gaurang P
fonte

4

Observe que a função form.reset()não funcionará se alguma tag de entrada no formulário tiver atributoname='reset'

— alexbobroff
fonte

2

Tente o seguinte:

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

— Hazem_M
fonte

2

Limpe o formulário da seguinte maneira

document.forms[0].reset();

Você pode simplesmente limpar os elementos do formulário dentro do grupo. usando isso forms[0].

— Nagaraju Vuppala
fonte

1

Use a função JavaScript reset():

document.forms["frm_id"].reset();

— Felix Bagur
fonte

1

Você pode usar o seguinte:

$('[element]').trigger('reset')

— Justlearning
fonte

0

Experimente este código. Uma solução completa para sua resposta.

    <!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
fonte

-1

Você pode limpar o formulário inteiro usando a função onclick. Aqui está o código para ele.

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

A função window.location.reload () atualiza sua página e todos os dados são limpos.

— Arjun
fonte