Comment réinitialiser un formulaire à l'aide de jQuery avec la méthode .reset ()

J'avais un code de travail qui pouvait réinitialiser mon formulaire lorsque je cliquais sur un bouton de réinitialisation. Cependant, après que mon code soit plus long, je me rends compte qu'il ne fonctionne plus.

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

Et ma jQuery:

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

Y a-t-il une source que je devrais inclure dans mes codes pour que la .reset()méthode fonctionne? Auparavant, j'utilisais:

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

et la .reset()méthode fonctionnait.

Actuellement j'utilise

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

Cela pourrait-il être l'une des raisons?

vous pouvez essayer d'utiliser le lien de référence trigger ()

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

http://jsfiddle.net/8zLLn/

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

Mettez-le dans le violon JS. A fonctionné comme prévu.

Ainsi, aucun des problèmes susmentionnés n'est en cause ici. Vous rencontrez peut-être un problème d'identification conflictuel? Le clic s'exécute-t-il réellement?

Edit: (parce que je suis un triste sac sans capacité de commentaire appropriée) Ce n'est pas un problème directement avec votre code. Cela fonctionne bien lorsque vous le sortez du contexte de la page que vous utilisez actuellement, donc, au lieu d'être quelque chose avec les données de formulaire jQuery / javascript et attribuées particulières, cela doit être autre chose. Je commençais à bissecter le code autour et j'essayais de trouver où cela se passait. Je veux dire, juste pour 'être sûr', je suppose que tu pourrais ...

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

dans la fonction de clic et assurez-vous qu'il cible le bon formulaire ...

et si c'est le cas, ce doit être quelque chose qui n'est pas répertorié ici.

modifier la partie 2: Une chose que vous pouvez essayer (si elle ne le cible pas correctement) est d'utiliser "input: reset" au lieu de ce que vous utilisez ... aussi, je suggérerais parce que ce n'est pas la cible qui ne fonctionne pas correctement pour le savoir ce que le clic réel cible. Il suffit d'ouvrir les outils Firebug / Developer, qu'avez-vous, lancez-les

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

et voyez ce qui apparaît. puis nous pouvons partir de là.

Selon cet article ici , jQuery n'a pas de reset()méthode; mais JavaScript natif le fait. Donc, convertissez l'élément jQuery en objet JavaScript en utilisant:

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

C'est l'une de ces choses qui est en fait plus facile à faire en vanilla Javascript que jQuery. jQuery n'a pas de resetméthode, mais l'élément de formulaire HTML en possède, vous pouvez donc réinitialiser tous les champs d'un formulaire comme celui-ci:

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

Si vous le faites via jQuery (comme on le voit dans d'autres réponses ici:) $('#configform')[0].reset(), le [0]récupère le même élément de formulaire DOM que vous obtiendriez directement via document.getElementById. Cette dernière approche est à la fois plus efficace et plus simple (car avec l'approche jQuery, vous obtenez d'abord une collection, puis vous devez en extraire un élément, tandis qu'avec le Javascript vanilla, vous obtenez simplement l'élément directement).

Un bouton de réinitialisation n'a besoin d'aucun script (ou nom ou identifiant):

<input type="reset">

et tu as fini. Mais si vous devez vraiment utiliser un script, notez que chaque contrôle de formulaire a une propriété de formulaire qui fait référence au formulaire dans lequel il se trouve, vous pouvez donc faire:

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

Mais un bouton de réinitialisation est un bien meilleur choix.

J'ai enfin résolu le problème !! @RobG avait raison sur le formtag et le tabletag. la formbalise doit être placée à l'extérieur de la table. avec ça,

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

fonctionne sans avoir besoin de jquery ou d'autre chose. cliquez simplement sur le bouton et tadaa ~ l'ensemble du formulaire est réinitialisé;) génial!

J'utilise ce code simple:

//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');
});

En utilisant la fonction jquery .closest (élément) et .find (...) .

Obtenir l' élément parent et chercher l' enfant .

Enfin, faites la fonction nécessaire.

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

La première ligne réinitialisera les entrées du formulaire

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

Le second réinitialise select2

Facultatif: vous pouvez l'utiliser si vous avez différents types enregistrés avec différents événements

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

Une réinitialisation rapide des champs du formulaire est possible avec cette fonction de réinitialisation jQuery.

lorsque vous avez obtenu une réponse positive, lancez le code ci-dessous.

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

Vous pouvez simplement ajouter un type d'entrée = reset avec un id = resetform comme celui-ci

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

puis avec jquery vous utilisez simplement la fonction .click () sur l'élément avec le id = resetform comme suit

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

et le formulaire se réinitialise Remarque: Vous pouvez également masquer le bouton de réinitialisation avec id = resetform en utilisant votre css

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

Voici une solution simple avec Jquery. Cela fonctionne globalement. Jetez un oeil sur le code.

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

Ajoutez une classe claire à un bouton sous toutes les formes dont vous avez besoin pour le réinitialiser. Par exemple:

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

jQuery n'a pas de reset()méthode; mais JavaScript natif le fait. Donc, convertissez l'élément jQuery en objet JavaScript en utilisant:

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

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

Nous pouvons simplement utiliser du code Javascript

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

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

La façon la plus simple de penser que c'est robuste. Placer dans la balise de formulaire.

Vous pouvez utiliser ce qui suit.

@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>
}

Effacez ensuite le formulaire:

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

Votre code devrait fonctionner. Assurez-vous qu'il static/jquery-1.9.1.min.jsexiste. Vous pouvez également essayer de revenir à static/jquery.min.js. Si cela résout le problème, vous avez identifié le problème.