Limpar campos de formulário com jQuery

Quero limpar todos os campos de entrada e área de texto de um formulário. Funciona da seguinte maneira ao usar um botão de entrada com a resetclasse:

$(".reset").bind("click", function() {
  $("input[type=text], textarea").val("");
});

Isso limpará todos os campos da página, não apenas os do formulário. Como seria o meu seletor exatamente como o botão de redefinição atual está localizado?

$(".reset").click(function() {
    $(this).closest('form').find("input[type=text], textarea").val("");
});

Para o jQuery 1.6+ :

$(':input','#myform')
  .not(':button, :submit, :reset, :hidden')
  .val('')
  .prop('checked', false)
  .prop('selected', false);

Para jQuery <1.6 :

$(':input','#myform')
  .not(':button, :submit, :reset, :hidden')
  .val('')
  .removeAttr('checked')
  .removeAttr('selected');

Consulte este post: Redefinindo um formulário de vários estágios com jQuery

Ou

$('#myform')[0].reset();

Como o jQuery sugere :

Para recuperar e alterar as propriedades de DOM, tal como o checked, selectedou disabledestado de elementos de forma, utilizar o .prop () método.

Alguma razão para isso não ser usado?

$("#form").trigger('reset');

Isso não trata dos casos em que os campos de entrada do formulário têm valores padrão não vazios.

Algo como deve funcionar

$('yourdiv').find('form')[0].reset();

se você usar seletores e transformar valores em valores vazios, ele não redefinirá o formulário, mas todos os campos em branco. Redefinir é criar o formulário como antes de qualquer ação de edição do usuário após o carregamento do formulário do lado do servidor. Se houver uma entrada com o nome "nome de usuário" e esse nome de usuário tiver sido pré-preenchido do lado do servidor, a maioria das soluções nesta página excluirá esse valor da entrada, não o redefinirá para o valor que era antes da alteração do usuário. Se você precisar redefinir o formulário, use o seguinte:

$('#myform')[0].reset();

se você não precisar redefinir o formulário, mas preencher todas as entradas com algum valor, por exemplo, valor vazio, poderá usar a maioria das soluções de outros comentários.

Simples, mas funciona como um encanto.

$("#form").trigger('reset'); //jquery
document.getElementById("myform").reset(); //native JS

Se alguém ainda estiver lendo este tópico, aqui está a solução mais simples, usando não jQuery, mas JavaScript simples. Se seus campos de entrada estiverem dentro de um formulário, existe um comando simples de redefinição de JavaScript:

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

Saiba mais aqui: http://www.w3schools.com/jsref/met_form_reset.asp

Felicidades!

$('form[name="myform"]')[0].reset();

Por que ele precisa ser feito com JavaScript?

<form>
    <!-- snip -->
    <input type="reset" value="Reset"/>
</form>

http://www.w3.org/TR/html5/the-input-element.html#attr-input-type-keywords

Tentei isso primeiro, ele não limpará os campos com valores padrão.

Aqui está uma maneira de fazer isso com o jQuery:

$('.reset').on('click', function() {
    $(this).closest('form').find('input[type=text], textarea').val('');
});

Se você deseja esvaziar todas as caixas de entrada, independentemente do seu tipo, é um minuto passo a passo

 $('#MyFormId')[0].reset();

Tenho o truque mais fácil para redefinir o formulário

jQuery("#review-form")[0].reset();

ou

$("#review-form").get().reset();

Com Javascript, você pode simplesmente fazê-lo com esta sintaxe getElementById("your-form-id").reset();

você também pode usar o jquery chamando a função reset dessa maneira $('#your-form-id')[0].reset();

Lembre-se de não esquecer [0]. Você receberá o seguinte erro se

TypeError: $ (...). Reset não é uma função

O JQuery também fornece um evento que você pode usar

$ ('# form_id'). trigger ("redefinir");

Eu tentei e funciona.

Nota: É importante observar que esses métodos somente redefinem seu formulário para o valor inicial definido pelo servidor no carregamento da página. Isso significa que, se sua entrada foi definida no valor 'valor definido' antes de você fazer uma alteração aleatória, o campo será redefinido para o mesmo valor depois que o método de redefinição for chamado.

Espero que ajude

$('#editPOIForm').each(function(){ 
    this.reset();
});

onde editPOIFormé o idatributo do seu formulário.

Por que você não usa document.getElementById("myId").reset();? este é o simples e bonito

Código testado e verificado:

  $( document ).ready(function() {
    $('#messageForm').submit(function(e){
       e.preventDefault();
    });
    $('#send').click(function(e){
      $("#messageForm")[0].reset();
    });
  });

Javascript deve estar incluído $(document).readye deve estar com sua lógica.

A solução mais fácil e melhor é
$("#form")[0].reset();

Não use aqui -
$(this)[0].reset();

Digamos que, se você deseja limpar os campos e, exceto, accountType, na caixa suspensa de tempo médio será redefinida para um valor específico, ou seja, 'Todos' .Os campos restantes devem ser redefinidos para vazios, ou seja, caixa de texto. campos específicos como nossa exigência.

 $(':input').not('#accountType').each( function() {

    if(this.type=='text' || this.type=='textarea'){
             this.value = '';
       }
    else if(this.type=='radio' || this.type=='checkbox'){
         this.checked=false;
      }
         else if(this.type=='select-one' || this.type=='select-multiple'){
              this.value ='All';
     }
 });

Eu uso isso :

$(".reset").click(function() {
  $('input[type=text]').each(function(){
     $(this).val('');
  });
});

E aqui está o meu botão:

<a href="#" class="reset">
  <i class="fa fa-close"></i>
     Reset
</a>

Use este código onde você deseja chamar a função de redefinição normal por jQuery

setTimeout("reset_form()",2000);

E escreva esta função para fora do site jQuery no documento pronto

<script>
function reset_form()
{
    var fm=document.getElementById('form1');
    fm.reset();
}
</script>

Alguns de vocês estavam reclamando que os rádios estão sem o status "marcado" padrão ... Tudo o que você precisa fazer é adicionar os seletores: radio,:: ao .not e o problema foi resolvido.

Se você não conseguir que todas as outras funções de redefinição funcionem, essa funcionará.

• Adaptado da resposta da ngen

  function form_reset(formID){
      $(':input','#'+formID)
      .not(':button',':submit',':reset',':hidden',':radio',':checkbox')
      .val('');
  }

@using (Ajax.BeginForm("Create", "AcceptanceQualityDefect", new AjaxOptions()
{
    OnSuccess = "ClearInput",
    HttpMethod = "Post",
    UpdateTargetId = "defect-list",
    InsertionMode = InsertionMode.Replace
}, new { @id = "frmID" })) 

1. frmID é a identificação do formulário

2. OnSuccessda operação, chamamos a função JavaScript com o nome " ClearInput"

   <script type="text/javascript">
       function ClearInput() {
           //call action for render create view
           $("#frmID").get(0).reset();
       }
   </script>

3. se você fizer as duas coisas corretamente, não poderá impedir que funcione ...

O código a seguir limpa todo o formulário e seus campos estarão vazios. Se você deseja limpar apenas um formulário específico, se a página tiver mais de um formulário, mencione o ID ou a classe do formulário

$("body").find('form').find('input,  textarea').val('');

Se eu quiser limpar todos os campos, exceto accountType ... Use o seguinte

$q(':input','#myform').not('#accountType').val('').removeAttr('checked').removeAttr('selected');

o código que vejo aqui e em questões relacionadas ao SO parece incompleto.

Redefinir um formulário significa definir os valores originais do HTML, então montei isso para um pequeno projeto que estava realizando com base no código acima:

            $(':input', this)
                .not(':button, :submit, :reset, :hidden')
                .each(function(i,e) {
                    $(e).val($(e).attr('value') || '')
                        .prop('checked',  false)
                        .prop('selected', false)
                })

            $('option[selected]', this).prop('selected', true)
            $('input[checked]',   this).prop('checked',  true)
            $('textarea',         this).each(function(i,e) { $(e).val($(e).html()) })

Informe-me se estiver faltando alguma coisa ou algo pode ser melhorado.

Nenhuma das opções acima funciona em um caso simples quando a página inclui uma chamada para o controle do usuário da web que envolve o processamento de solicitação IHttpHandler (captcha). Depois de enviar o requsrt (para processamento de imagem), o código abaixo não limpa os campos no formulário (antes de enviar a solicitação HttpHandler), tudo funciona corretamente.

<input type="reset"  value="ClearAllFields" onclick="ClearContact()" />

 <script type="text/javascript">
       function ClearContact() {
           ("form :text").val("");
       }
    </script>

Eu escrevi um plugin jQuery universal:

/**
 * Resets any input field or form
 */
$.fn.uReset = function () {
    return this.filter('form, :input').each(function () {
        var input = $(this);
        
        // Reset the form.
        if (input.is('form')) {
            input[0].reset();
            return;
        }

        // Reset any form field.
        if (input.is(':radio, :checkbox')) {
            input.prop('checked', this.defaultChecked);
        } else if (input.is('select')) {
            input.find('option').each(function () {
                $(this).prop('selected', this.defaultSelected);
            });
        } else if (this.defaultValue) {
            input.val(this.defaultValue);
        } else {
            console.log('Cannot reset to default value');
        }
    });
};

$(function () {
    // Test jQuery plugin.
    $('button').click(function (e) {
        e.preventDefault();
        
        var button = $(this),
            inputType = button.val(),
            form = button.closest('form');
        
        if (inputType === 'form') {
            form.uReset()
        } else {
            $('input[type=' + inputType + '], ' + inputType, form).uReset();
        }
    });
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
<h3>Form</h3>
<form>
    <input type="text" value="default"/><br /><br />
    Ch 1 (default checked) <input type="checkbox" name="color" value="1" checked="checked" /><br />
    Ch 2 <input type="checkbox" name="color" value="2" /><br />
    Ch 3 (default checked) <input type="checkbox" name="color" value="3" checked="checked" /><br /><br />
    <select name="time"><br />
        <option value="15">15</option>
        <option selected="selected" value="30">30</option>
        <option value="45">45</option>
    </select><br /><br />
    R 1 <input type="radio" name="color" value="1" /><br />
    R 2 (default checked) <input type="radio" name="color" value="2" checked="checked" /><br />
    R 3 <input type="radio" name="color" value="3" /><br /><br />
    <textarea>Default text</textarea><br /><br />
    
    <p>Play with form values and then try to reset them</p>
    
    <button type="button" value="text">Reset text input</button>
    <button type="button" value="checkbox">Reset checkboxes</button>
    <button type="button" value="select">Reset select</button>
    <button type="button" value="radio">Reset radios</button>
    <button type="button" value="textarea">Reset textarea</button>
    <button type="button" value="form">Reset the Form</button>
</form>

Adicione o botão de redefinição oculto da seguinte maneira

<input id="resetBtn" type="reset" value="reset" style="display:none" />
// Call reset buttons click event
// Similar to ClearInputs('resetBtn');
function ClearInputs(btnSelector) {
     var btn = $("#" + btnSelector);
     btn.click();
}

$ ('form'). submit (function () {

var el = $(this);

$('<button type="reset" style="display:none; "></button>')
    .appendTo(el)
    .click()
    .remove()
;

return false;

});