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

Respostas:

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

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