Como redefinir um formulário usando jQuery com o método .reset ()


270

Eu tinha um código de trabalho que poderia redefinir meu formulário ao clicar em um botão de redefinição. No entanto, depois que meu código está ficando mais longo, percebo que ele não funciona mais.

 <div id="labels">
        <table class="config">
            <thead>
                <tr>
                    <th colspan="4"; style= "padding-bottom: 20px; color:#6666FF; text-align:left; font-size: 1.5em">Control Buttons Configuration</th>
                </tr>
                <tr>
                    <th>Index</th>
                    <th>Switch</th>
                    <th>Response Number</th>
                    <th>Description</th>
                </tr>
            </thead>
            <tbody>

                <form id="configform" name= "input" action="#" method="get">
                <tr><td style="text-align: center">1</td>
                    <td><img src= "static/switch.png" height="100px" width="108px"></td>
                    <td id="small"><input style="background: white; color: black;" type="text" value="" id="number_one"></td>
                    <td><input style="background: white; color: black;" type="text"  id="label_one"></td>
                </tr>
                <tr>
                    <td style="text-align: center">2</td>
                    <td><img src= "static/switch.png" height="100px" width="108px"></td>
                    <td id="small"><input style="background: white; color: black;" type="text" id = "number_two" value=""></td>
                    <td><input style="background: white; color: black;" type="text"  id = "label_two"></td>
                </tr>
                <tr>
                    <td style="text-align: center">3</td>
                    <td><img src= "static/switch.png" height="100px" width="108px"></td>
                    <td id="small"><input style="background: white; color: black;" type="text" id="number_three" value=""></td>
                    <td><input style="background: white; color: black;" type="text" id="label_three"></td>
                </tr>
                <tr>
                    <td style="text-align: center">4</td>
                    <td><img src= "static/switch.png" height="100px" width="108px"></td>
                    <td id="small"><input style="background: white; color: black;" type="text" id="number_four" value=""></td>
                    <td><input style="background: white; color: black;" type="text" id="label_three"></td>
                </tr>
                <tr>
                    <td></td>
                    <td><input type="submit" id="configsubmit" value="Submit"></td>
                </tr>
                <tr>
                    <td><input type="reset" id="configreset" value="Reset"></td>
                </tr>

                </form>
            </tbody>
        </table>

    </div>

E meu jQuery:

 $('#configreset').click(function(){
            $('#configform')[0].reset();
 });

Existe alguma fonte que devo incluir nos meus códigos para que o .reset()método funcione? Anteriormente eu estava usando:

<script src="static/jquery.min.js">
</script>
<script src="static/jquery.mobile-1.2.0.min.js">
</script>

e o .reset()método estava funcionando.

Atualmente estou usando

<script src="static/jquery-1.9.1.min.js"></script>      
<script src="static/jquery-migrate-1.1.1.min.js"></script>
<script src="static/jquery.mobile-1.3.1.min.js"></script>

Poderia ser um dos motivos?


você pode dar um exemplo de não funcionar? algum dos campos está sendo redefinido?
Arun P Johny

É algo como isso, mas ele está funcionando bem aqui jsfiddle.net/chJ8B ? :( provavelmente por causa de outras partes do roteiro, mas eu tenho apenas 1 forma
yvonnezoe

minha pergunta é se nenhum do campo é resetted / alguns estão trabalhando
Arun P Johny

13
Seu HTML é inválido . Um formulário não pode ser filho de um elemento TBODY e um TR não pode ser filho de um elemento FORM. Coloque as tags de formulário fora da tabela (ou seja, coloque a tabela no formulário). Muito possivelmente, o formulário está sendo movido para fora da tabela, mas os controles do formulário permanecem nas células e, portanto, não estão mais no formulário.
RobG

@RobG: O bom ponto! Eu tentarei isso. obrigado! eu poderia ter perdido este comentário útil se eu não voltar aqui para obter o meu link violino: s
yvonnezoe

Respostas:


464

você pode tentar usar o link de referência trigger ()

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

2
Simplesmente mágico e direto! Muito apreciado por compartilhar.
precisa

Prezados eleitores, você poderia me dizer o motivo dos seus votos negativos, para que eu possa melhorar minha resposta.
precisa saber é o seguinte

Estou usando $ ('. Profile_img_form'). Trigger ('reset'); Eu adicionei profile_img_form nomeado classe no meu formulário, em seguida, chamou. ele não redefine meu formulário e retorna uma mensagem de erro como Untaught SyntaxError: Expressão regular inválida: /(^|\.)bs\.(?:.*\.|)fileinput(\.|$)/: Por favor, sugira o que é questão. Obrigado.
Kamlesh

@Kamlesh ele deve funcionar, eu criei uma demo para você, clique em jsfiddle.net/Lkt4eq9y/2
SagarPPanchal

1
Obrigado pela resposta. Horas salvas de Googling / SO'ing :)
Anjana Silva

276

http://jsfiddle.net/8zLLn/

  $('#configreset').click(function(){
        $('#configform')[0].reset();
  });

Coloque no JS violino. Trabalhou como pretendido.

Portanto, nenhuma das questões acima mencionadas tem culpa aqui. Talvez você esteja tendo um problema de identificação conflitante? O clique está realmente sendo executado?

Edit: (porque eu sou um saco triste sem a capacidade de comentar) Não é um problema diretamente com o seu código. Funciona bem quando você o tira do contexto da página que está usando no momento; portanto, em vez de ser algo com os dados específicos do formulário jQuery / javascript e atributo atribuído, deve ser outra coisa. Eu começaria a dividir o código em torno dele e tentaria descobrir onde ele estava acontecendo. Quero dizer, apenas para 'ter certeza', suponho que você possa ...

console.log($('#configform')[0]);

na função de clique e verifique se está direcionando para a forma correta ...

e se for, tem que ser algo que não está listado aqui.

editar parte 2: Uma coisa que você pode tentar (se não o direcionar corretamente) é usar "input: reset" em vez do que você está usando ... além disso, sugiro porque não é o alvo que está trabalhando incorretamente para descobrir qual é o objetivo do clique real. Basta abrir as ferramentas de desenvolvedor / firebug, o que você tem, lançar

console.log($('#configreset'))

e veja o que aparece. e então podemos ir de lá.


não conflitantes ID :( Eu estou tentando selecionar camada por camada e verificar se as obras do clique
yvonnezoe

1
hmm parece que o clique não funciona! eu adicionei $('#ptest').html("clicked reset")no clique (function () {}); onde deveria mostrar "clicou em reset" mas não apareceu
yvonnezoe

Eu tenho uma pergunta aqui. toda vez que eu uso o console.log, não tenho idéia de onde procurar. Estou usando o Python IDLE e um terminal para executar o script python. o javascript está nele. De qualquer forma, quando eu uso `alert ($ ( '# configform') [0]), dá-me [objeto HTMLFormElement]
yvonnezoe

1
Tente usar o alerta (JSON.stringify ($ '# configform') [0])). O alerta não se importa muito com objetos bonitos de impressão (ou com o conteúdo). Apenas permite que você saiba que é um objeto.
FullOnFlatWhite

1
@DylanChensky, a mágica do jQuery é que tudo é um conjunto (array). Assim como se você estivesse usando uma matriz regular no jQuery, [0]selecione o primeiro elemento. Mas no jQuery, ele seleciona o html real do elemento. Então, [0]está fornecendo o html, que permite chamar o método html, não o jQuery, chamado reset. Consulte a resposta de @kevin abaixo para obter mais informações.
FullOnFlatWhite

110

De acordo com este post aqui , o jQuery não tem reset()método; mas o JavaScript nativo sim. Portanto, converta o elemento jQuery em um objeto JavaScript usando:

$("#formId")[0].reset()
// or
$("#formId").get(0).reset()

1
Funciona e estou de acordo, o jQuery não possui o método reset (). Você pode ver como fazê-lo com JavaScript nativa no doc w3school: w3schools.com/jsref/met_form_reset.asp
serfer2

2
Gostaria de observar que isso apenas redefinirá o formulário, não o limpará. Ou seja, se o formulário tiver valores enviados com a solicitação, eles serão restaurados.
Protector one

Gostaria de adicionar um comentário sobre o espaço reservado, renderização inicial do formulário, os elementos do formulário têm valores de espaço reservado, após essa redefinição, independentemente do espaço reservado mostrado novamente, mas o valor ficar em branco, portanto, tenha cuidado ao validar o formulário. Eu estava adicionando validação genérica de formulário para verificar se o valor do espaço reservado é o padrão.
Ramratan Gupta

48

Essa é uma das coisas mais fáceis de fazer em Javascript vanilla do que o jQuery. O jQuery não possui um resetmétodo, mas o HTML Form Element, portanto, você pode redefinir todos os campos em um formulário como este:

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

Se você fizer isso via jQuery (como visto em outras respostas aqui :) $('#configform')[0].reset(), [0]está buscando o mesmo elemento DOM do formulário que você obteria diretamente via document.getElementById. A última abordagem é ao mesmo tempo mais eficiente e mais simples (já que, com a abordagem jQuery, você primeiro obtém uma coleção e, em seguida, precisa buscar um elemento nela, enquanto que com o Javascript vanilla você obtém o elemento diretamente).


23

Um botão de redefinição não precisa de nenhum script (ou nome ou ID):

<input type="reset">

e pronto. Mas se você realmente deve usar o script, observe que todo controle de formulário tem uma propriedade de formulário que faz referência ao formulário em que está, para que você possa fazer:

<input type="button" onclick="this.form.reset();">

Mas um botão de redefinição é uma escolha muito melhor.


você quer dizer simplesmente que essa linha serve? oO, então meu html acima está correto?
Yvonnezoe

Defina "não está funcionando". Que erro você recebe? O que não está funcionando? Os botões de redefinição fazem parte dos formulários HTML para sempre, eles funcionam.
RobG

1
"não está funcionando" - não redefine nada, nenhuma alteração foi vista no formulário.
Yvonnezoe

1
Algo a ser observado é que "redefinir" não significa "meu formulário está limpo". O que a semântica de "redefinição" realmente faz é retornar todos os elementos "formulário" de volta aos seus atributos "valor" originais. Isso me confundiu por alguns minutos, pelo menos!
Jocull # 12/16

@ jocull - quando tudo mais falha, sempre há a versão W3C ou WHATWG do padrão HTML. ;-)
RobG 12/12

21

Finalmente resolvi o problema !! @RobG estava certo sobre a formetiqueta e tabletag. a formetiqueta deve ser colocada fora da mesa. com isso,

<td><input type="reset" id="configreset" value="Reset"></td>

funciona sem a necessidade de jquery ou qualquer outra coisa. basta clicar no botão e tadaa ~ todo o formulário é redefinido;) brilhante!


3
você geralmente pode confirmar que isso está acontecendo inspecionando o código-fonte (não visualizando a fonte da página, pois isso mostrará o que foi gerado, mas usando algo como Ferramentas de Desenvolvedor <kbd> F12 </kbd>), que mostra "qual é a o navegador vê "- nesse caso, mostraria a você (no Chrome, pelo menos) que a formtag foi fechada automaticamente no início do tbodyarquivo, excluindo os elementos de entrada.
drzaus



13

Usando a função jquery .closest (elemento) e .find (...) .

Obtendo o elemento pai e procurando o filho .

Finalmente, faça a função necessária.

$("#form").closest('form').find("input[type=text], textarea").val("");

4
Embora esse bloco de código possa responder à pergunta, você sempre deve fornecer algumas explicações sobre o motivo.
Sascha Wolf

1
$("#form").find("input[type=text], textarea").val("");eu fiz dessa maneira
Bira

11

A primeira linha redefinirá as entradas do formulário

$('form#myform').trigger("reset"); //Line1
$('form#myform select').trigger("change"); //Line2

O segundo redefinirá o select2

Opcional: Você pode usar isso se tiver tipos diferentes registrados com eventos diferentes

$('form#myform select, form input[type=checkbox]').trigger("change"); //Line2

5

Uma redefinição rápida dos campos do formulário é possível com esta função de redefinição do jQuery.

quando você obtiver resposta de sucesso, atire abaixo do código.

$(selector)[0].reset();


4

Você pode apenas adicionar um tipo de entrada = reset com um id = resetform como este

<html>
<form>
<input type = 'reset' id = 'resetform' value = 'reset'/>
<!--Other items in the form can be placed here-->
</form>
</html>

então, com jquery, você simplesmente usa a função .click () no elemento com o id = resetform da seguinte maneira

<script> 
$('#resetform').click();
</script>

e o formulário é redefinido Nota: Você também pode ocultar o botão de redefinição com id = resetform usando seu css

<style>
#resetform
{
display:none;
}
</style>

Não perdoe escondê-lo ... para torná-lo uma forma mais moderna. <input type = 'reset' id = 'resetform' value = 'reset' / style = 'display: none;'>
mangas

3

Aqui está uma solução simples com o Jquery. Funciona globalmente. Dê uma olhada no código.

$('document').on("click", ".clear", function(){
   $(this).closest('form').trigger("reset");
})

Adicione uma classe clara a um botão em todos os formulários necessários para redefini-lo. Por exemplo:

<button class="button clear" type="reset">Clear</button>

3

jQuery não possui reset()método; mas o JavaScript nativo sim. Portanto, converta o elemento jQuery em um objeto JavaScript usando:

$("#formId")[0].reset();

$("#formId").get(0).reset();

Podemos simplesmente usar código Javascript

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

2
<button type="reset">Reset</reset>

A maneira mais simples de pensar que é robusta. Coloque dentro da tag do formulário.


1

Você pode usar o seguinte.

@using (Html.BeginForm("MyAction", "MyController", new { area = "MyArea" }, FormMethod.Post, new { @class = "" }))
{
<div class="col-md-6">
    <div class="col-lg-3 col-md-3 col-sm-3 col-xs-12">
        @Html.LabelFor(m => m.MyData, new { @class = "col-form-label" })
    </div>
    <div class="col-lg-9 col-md-9 col-sm-9 col-xs-12">
        @Html.TextBoxFor(m => m.MyData, new { @class = "form-control" })
    </div>
</div>
<div class="col-md-6">
    <div class="">
        <button class="btn btn-primary" type="submit">Send</button>
        <button class="btn btn-danger" type="reset"> Clear</button>
    </div>
</div>
}

Em seguida, limpe o formulário:

    $('.btn:reset').click(function (ev) {
        ev.preventDefault();
        $(this).closest('form').find("input").each(function(i, v) {
            $(this).val("");
        });
    });

Parece haver muito código específico da estrutura aqui. Eu recomendo evitar essas coisas ao responder perguntas sobre SO, pois a pergunta não especificava que eles estavam usando qualquer estrutura além do jQuery
Lazerbeak12345

0

Seu código deve funcionar. Verifique se static/jquery-1.9.1.min.jsexiste. Além disso, você pode tentar reverter para static/jquery.min.js. Se isso resolver o problema, você o identificou.


O único outro problema em que consigo pensar é que você tem outra forma com o mesmo id ( configform). Você deve fazer alguma investigação usando o console. Primeira tentativa $. Se você estiver usando o Chrome, digitar $no console ativará uma lista sensível ao contexto se o jQuery estiver carregado. Se você digitar $e pressionar return, ele avaliará uma função se o jQuery estiver carregado. Próxima tentativa $("#configform"). Clique com o botão direito do mouse no resultado e selecione Reveal in Elements panel.
Ic3b3rg

obrigado :) mas eu não tenho chrome. é a mesma maneira de fazer isso usando o firebug? (i tê-lo instalado, mas nunca usá-lo antes)
yvonnezoe
Ao utilizar nosso site, você reconhece que leu e compreendeu nossa Política de Cookies e nossa Política de Privacidade.
Licensed under cc by-sa 3.0 with attribution required.