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

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 tentar usar o link de referência trigger ()

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

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á.

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()

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).

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.

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!

Eu uso este código simples:

//reset form 
$("#mybutton").click(function(){
    $("#myform").find('input:text, input:password, input:file, select, textarea').val('');
    $("#myform").find('input:radio, input:checkbox').removeAttr('checked').removeAttr('selected');
});

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("");

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

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();

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>

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>

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();

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

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

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("");
        });
    });

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.