Redefinindo um formulário de vários estágios com jQuery

Eu tenho um formulário com um botão de redefinição padrão codificado da seguinte forma:

<input type="reset" class="button standard" value="Clear" />

O problema é que o referido formulário é do tipo de vários estágios; portanto, se um usuário preencher um estágio e depois retornar mais tarde, os valores 'lembrados' para os vários campos não serão redefinidos quando o botão Limpar for clicado.

Eu estou pensando que anexar uma função jQuery para percorrer todos os campos e limpá-los 'manualmente' faria o truque. Eu já estou usando jQuery dentro do formulário, mas estou apenas começando a acelerar e não sei como fazer isso, além de fazer referência individual a cada campo por ID, o que não parece muito eficiente.

TIA por qualquer ajuda.

atualizado em março de 2012.

Então, dois anos depois de eu ter respondido originalmente a essa pergunta, volto para ver que ela se transformou em uma grande bagunça. Sinto que está na hora de voltar a ele e tornar minha resposta realmente correta, pois é a mais votada e aceita.

Para o registro, a resposta de Titi está errada, pois não é o que o pôster original solicitou - é correto que seja possível redefinir um formulário usando o método reset () nativo, mas essa pergunta está tentando limpar um formulário fora do lembrado valores que permaneceriam no formulário se você o redefinir dessa maneira. É por isso que é necessária uma redefinição "manual". Suponho que a maioria das pessoas acabou nesta pergunta em uma pesquisa no Google e está realmente procurando o método reset (), mas não funciona no caso específico do OP.

Minha resposta original foi esta:

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

O que pode funcionar em muitos casos, inclusive no OP, mas, como indicado nos comentários e em outras respostas, limpará os elementos de rádio / caixa de seleção de qualquer atributo de valor.

Uma resposta mais correta (mas não perfeita) é:

function resetForm($form) {
    $form.find('input:text, input:password, input:file, select, textarea').val('');
    $form.find('input:radio, input:checkbox')
         .removeAttr('checked').removeAttr('selected');
}

// to call, use:
resetForm($('#myform')); // by id, recommended
resetForm($('form[name=myName]')); // by name

Usando os :text, :radio, etc. seletores por si só é considerado má prática por jQuery como eles acabam avaliando a *:textque torna demorar muito mais tempo do que deveria. Prefiro a abordagem da lista de desbloqueio e gostaria de tê-la usado na minha resposta original. De qualquer forma, especificando a inputparte do seletor e o cache do elemento do formulário, isso deve torná-lo a resposta com melhor desempenho aqui.

Essa resposta ainda pode ter algumas falhas se o padrão das pessoas para elementos selecionados não for uma opção que tenha um valor em branco, mas certamente é tão genérico quanto possível e isso precisaria ser tratado caso a caso .

Em http://groups.google.com/group/jquery-dev/msg/2e0b7435a864beea :

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

A configuração myinput.val('')pode não emular "redefinir" 100% se você tiver uma entrada como esta:

<input name="percent" value="50"/>

Por exemplo, chamar myinput.val('')uma entrada com um valor padrão de 50 definiria como uma sequência vazia, enquanto chamar myform.reset()seria redefinir para seu valor inicial de 50.

Há um grande problema com a resposta aceita de Paolo. Considerar:

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

A .val('')linha também limpará os valueitens atribuídos a caixas de seleção e botões de opção. Então, se (como eu) você fizer algo assim:

<input type="checkbox" name="list[]" value="one" />
<input type="checkbox" name="list[]" value="two" checked="checked" />
<input type="checkbox" name="list[]" value="three" />

O uso da resposta aceita transformará suas entradas em:

<input type="checkbox" name="list[]" value="" />
<input type="checkbox" name="list[]" value="" />
<input type="checkbox" name="list[]" value="" />

Opa - eu estava usando esse valor!

Aqui está uma versão modificada que manterá seus valores de caixa de seleção e rádio:

// Use a whitelist of fields to minimize unintended side effects.
$('INPUT:text, INPUT:password, INPUT:file, SELECT, TEXTAREA', '#myFormId').val('');  
// De-select any checkboxes, radios and drop-down menus
$('INPUT:checkbox, INPUT:radio', '#myFormId').removeAttr('checked').removeAttr('selected');

Plugin jQuery

Criei um plugin jQuery para poder usá-lo facilmente em qualquer lugar que eu precisar:

jQuery.fn.clear = function()
{
    var $form = $(this);

    $form.find('input:text, input:password, input:file, textarea').val('');
    $form.find('select option:selected').removeAttr('selected');
    $form.find('input:checkbox, input:radio').removeAttr('checked');

    return this;
}; 

Então agora eu posso usá-lo chamando:

$('#my-form').clear();

Limpar formulários é um pouco complicado e não é tão simples quanto parece.

Sugiro que você use o formulário plugin jQuery e usar sua clearForm ou resetForm funcionalidade. Ele cuida da maioria dos casos de canto.

document.getElementById ('frm'). reset ()

Eu costumo fazer:

$('#formDiv form').get(0).reset()

ou

$('#formId').get(0).reset()

Aqui está algo para você começar

$('form') // match your correct form 
.find('input[type!=submit], input[type!=reset]') // don't reset submit or reset
.val(''); // set their value to blank

Obviamente, se você tiver caixas de seleção / botões de opção, precisará modificar isso para incluí-los também e definir .attr({'checked': false});

editar A resposta de Paolo é mais concisa. Minha resposta é mais prolífica porque não sabia sobre o :inputseletor, nem pensei em simplesmente remover o atributo marcado.

Considere usar o plug - in de validação - é ótimo! E redefinir o formulário é simples:

var validator = $("#myform").validate();
validator.resetForm();

Acho que isso funciona bem.

$(":input").not(":button, :submit, :reset, :hidden").each( function() {
    this.value = this.defaultValue;     
});

basicamente, nenhuma das soluções fornecidas me faz feliz. conforme indicado por algumas pessoas, eles esvaziam o formulário em vez de redefini-lo.

no entanto, existem algumas propriedades javascript que ajudam:

• defaultValue para campos de texto
• defaultChecked para caixas de seleção e botões de opção
• defaultSelected para opções de seleção

estes armazenam o valor que um campo tinha quando a página foi carregada.

escrever um plugin jQuery agora é trivial: (para os impacientes ... aqui está uma demonstração http://jsfiddle.net/kritzikratzi/N8fEF/1/ )

código-plugin

(function( $ ){
    $.fn.resetValue = function() {  
        return this.each(function() {
            var $this = $(this); 
            var node = this.nodeName.toLowerCase(); 
            var type = $this.attr( "type" ); 

            if( node == "input" && ( type == "text" || type == "password" ) ){
                this.value = this.defaultValue; 
            }
            else if( node == "input" && ( type == "radio" || type == "checkbox" ) ){
                this.checked = this.defaultChecked; 
            }
            else if( node == "input" && ( type == "button" || type == "submit" || type="reset" ) ){ 
                // we really don't care 
            }
            else if( node == "select" ){
                this.selectedIndex = $this.find( "option" ).filter( function(){
                    return this.defaultSelected == true; 
                } ).index();
            }
            else if( node == "textarea" ){
                this.value = this.defaultValue; 
            }
            // not good... unknown element, guess around
            else if( this.hasOwnProperty( "defaultValue" ) ){
                this.value = this.defaultValue; 
            }
            else{
                // panic! must be some html5 crazyness
            }
        });
    }
} )(jQuery);

uso

// reset a bunch of fields
$( "#input1, #input2, #select1" ).resetValue(); 

// reset a group of radio buttons
$( "input[name=myRadioGroup]" ).resetValue(); 

// reset all fields in a certain container
$( "#someContainer :input" ).resetValue(); 

// reset all fields
$( ":input" ).resetValue(); 

// note that resetting all fields is better with the javascript-builtin command: 
$( "#myForm" ).get(0).reset(); 

algumas notas ...

• eu não olhei para os novos elementos de formulário html5, alguns podem precisar de tratamento especial, mas a mesma idéia deve funcionar.
• elementos precisam ser referenciados diretamente. ou seja $( "#container" ).resetValue(), não vai funcionar. sempre use$( "#container :input" ) lugar.
• Como mencionado acima, aqui está uma demonstração: http://jsfiddle.net/kritzikratzi/N8fEF/1/

Você pode achar que isso é realmente mais fácil de resolver sem o jQuery.

No JavaScript comum, isso é tão simples quanto:

document.getElementById('frmitem').reset();

Eu tento sempre lembrar que, enquanto usamos o jQuery para aprimorar e acelerar nossa codificação, às vezes não é realmente mais rápido. Nesses casos, geralmente é melhor usar outro método.

Fiz uma pequena variação da boa solução de Francis Lewis . O que a solução dele não faz é definir as opções suspensas como em branco. (Acho que quando a maioria das pessoas quer "limpar", provavelmente quer deixar todos os valores vazios.) Esse é o caso .find('select').prop("selectedIndex", -1).

$.fn.clear = function()
{
    $(this).find('input')
            .filter(':text, :password, :file').val('')
            .end()
            .filter(':checkbox, :radio')
                .removeAttr('checked')
            .end()
        .end()
    .find('textarea').val('')
        .end()
    .find('select').prop("selectedIndex", -1)
        .find('option:selected').removeAttr('selected')
    ;
    return this;
};

Normalmente, adiciono um botão de redefinição oculto ao formulário. quando necessário, basta: $ ('# reset'). click ();

Modificação da resposta mais votada para a $(document).ready()situação:

$('button[type="reset"]').click(function(e) {
    $form = $(this.form);
    $form.find('input:text, input:password, input:file, select, textarea').val('');
    $form.find('input:radio, input:checkbox').removeAttr('checked').removeAttr('selected');
    e.preventDefault();
});

Simplesmente use o seguinte jQuery Trigger event:

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

Isso redefinirá caixas de seleção, botões de opção, caixas de texto, etc ... Essencialmente, ele transforma seu formulário no estado padrão. Basta colocar o #ID, Class, elementinterior do jQueryseletor.

isso funcionou para mim, a resposta pyrotex não redefiniu os campos selecionados, levou a sua edição aqui:

// Use a whitelist of fields to minimize unintended side effects.
$(':text, :password, :file', '#myFormId').val('');  
// De-select any checkboxes, radios and drop-down menus
$(':input,select option', '#myFormId').removeAttr('checked').removeAttr('selected');
//this is for selecting the first entry of the select
$('select option:first', '#myFormId').attr('selected',true);

Estou usando a solução Paolo Bergantino, que é ótima, mas com alguns ajustes ... Especificamente para trabalhar com o nome do formulário em vez de um id.

Por exemplo:

function jqResetForm(form){
   $(':input','form[name='+form+']')
   .not(':button, :submit, :reset, :hidden')
   .val('')
   .removeAttr('checked')
   .removeAttr('selected');
}

Agora, quando eu quero usá-lo um poderia fazer

<span class="button" onclick="jqResetForm('formName')">Reset</span>

Como você vê, isso funciona com qualquer formulário e, como estou usando um estilo css para criar o botão, a página não será atualizada quando clicada. Mais uma vez, agradeço a Paolo por sua contribuição. O único problema é se eu tiver valores padrão no formulário.

Usei a solução abaixo e funcionou para mim (misturando javascript tradicional com jQuery)

$("#myformId").submit(function() {
    comand="window.document."+$(this).attr('name')+".reset()";
    setTimeout("eval(comando)",4000);
})

Eu sou apenas um intermediário em PHP e um pouco preguiçoso para mergulhar em uma nova linguagem como JQuery, mas não é a seguinte uma solução simples e elegante?

<input name="Submit1" type="submit" value="Get free quote" />
<input name="submitreset" type="submit" value="Reset" />

Não vejo uma razão para não ter dois botões de envio, apenas com propósitos diferentes. Então simplesmente:

if ($_POST['submitreset']=="Reset") {
$_source = "--Choose language from--";
$_target = "--Choose language to--"; }

Você acabou de redefinir seus valores para o valor que deveria ser o padrão.

Um método que usei em um formulário bastante grande (mais de 50 campos) era apenas recarregar o formulário com o AJAX, basicamente fazendo uma chamada de volta ao servidor e retornando os campos com seus valores padrão. Isso tornou muito mais fácil do que tentar pegar cada campo com JS e defini-lo como seu valor padrão. Também me permitiu manter os valores padrão em um único local - o código do servidor. Nesse site, também havia alguns padrões diferentes, dependendo das configurações da conta e, portanto, não precisei me preocupar em enviá-los para o JS. O único pequeno problema com o qual tive que lidar foram alguns campos de sugestão que exigiam inicialização após a chamada do AJAX, mas não muito.

Todas essas respostas são boas, mas a maneira mais fácil de fazer isso é com uma redefinição falsa, ou seja, você usa um link e um botão de redefinição.

Basta adicionar um pouco de CSS para ocultar o botão de redefinição real.

input[type=reset] { visibility:hidden; height:0; padding:0;}

E então no seu link você adiciona da seguinte forma

<a href="javascript:{}" onclick="reset.click()">Reset form</a>

<input type="reset" name="reset" id="reset" /><!--This input button is hidden-->

Espero que isto ajude! UMA.

<script type="text/javascript">
$("#edit_name").val('default value');
$("#edit_url").val('default value');
$("#edit_priority").val('default value');
$("#edit_description").val('default value');
$("#edit_icon_url option:selected").removeAttr("selected");
</script>

Aqui com a atualização para caixas de seleção e seleciona:

$('#frm').find('input:text, input:password, input:file, textarea').val('');
$('#frm').find('input:radio, input:checkbox').attr("checked",false).checkboxradio("refresh");
$('#frm').find('select').val('').selectmenu('refresh');

Eu estava tendo o mesmo problema e o cargo de Paolo me ajudou, mas eu precisava ajustar uma coisa. Meu formulário com o ID advancedindexsearch continha apenas campos de entrada e obtém os valores de uma sessão. Por alguma razão, o seguinte não funcionou para mim:

$("#advancedindexsearch").find("input:text").val("");

Se eu colocar um alerta depois disso, vi os valores removidos corretamente, mas depois foram substituídos novamente. Ainda não sei como ou por quê, mas a seguinte linha fez o truque para mim:

$("#advancedindexsearch").find("input:text").attr("value","");

A resposta de Paolo não conta para os selecionadores de data, adicione isto em:

$form.find('input[type="date"]').val('');

Melhorei um pouco a resposta original de Paolo Bergantino

function resetFormInputs(context) {
    jQuery(':input', context)
    .removeAttr('checked')
    .removeAttr('selected')
    .not(':button, :submit, :reset, :hidden')
    .each(function(){
         jQuery(this).val(jQuery(this).prop('defautValue'));
    });
}

Dessa maneira, eu posso passar qualquer elemento de contexto para a função. Eu posso redefinir o formulário inteiro ou apenas um determinado conjunto de campos, por exemplo:

resetFormInputs('#form-id'); // entire form
resetFormInputs('.personal-info'); // only the personal info field set

Além disso, os valores padrão das entradas são mantidos.

aqui está a minha solução, que também funciona com os novos tipos de entrada html5:

/**
 * removes all value attributes from input/textarea/select-fields the element with the given css-selector
 * @param {string} ele css-selector of the element | #form_5
 */
function clear_form_elements(ele) {
    $(ele).find(':input').each(function() {
        switch (this.type) {
            case 'checkbox':
            case 'radio':
                this.checked = false;
            default:
                $(this).val('');
                break;
        }
    });
}

Complementando a resposta aceita, se você usar o plug-in SELECT2, precisará recuperar o script select2 para fazer alterações em todos os campos select2:

function resetForm(formId){
        $('#'+formId).find('input:text, input:password, input:file, select, select2, textarea').val('');
        $('#'+formId).find('input:radio, input:checkbox').removeAttr('checked').removeAttr('selected');
        $('.select2').select2();
    }

$(this).closest('form').find('input,textarea,select').not(':image').prop('disabled', true);