web-dev-qa-db-fra.com

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 rallongé, je me rends compte que cela 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 mon jQuery:

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

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

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

et la méthode .reset() fonctionnait. 

J'utilise actuellement

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

Pourrait-il être l'une des raisons?

javascriptjqueryformsreset
216
yvonnezoe

J'ai enfin résolu le problème !! @ RobG avait raison sur les balises form et table. La balise form 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 quoi que ce soit d'autre. un simple clic sur le bouton et tadaa ~ tout le formulaire est réinitialisé;) génial!

16
yvonnezoe

vous pouvez essayer d'utiliser trigger () Reference Link

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

http://jsfiddle.net/8zLLn/

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

Mettez-le dans le violon JS. Travaillé comme prévu. 

Donc, aucun des problèmes susmentionnés n’est en cause ici. Peut-être avez-vous un problème d'identification conflictuelle? Le clic est-il en train de s'exécuter?

Edit: (parce que je suis un sac triste 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. Par conséquent, au lieu que ce soit quelque chose avec les données de formulaire jQuery/javascript et attribuées particulières, il doit être autre chose. Je commencerais par diviser le code en deux et essayer de trouver où il se trouvait. Je veux dire, juste pour "s'assurer", je suppose que vous pourriez ...

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

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

et si c'est le cas, il doit s'agir de quelque chose qui ne figure pas dans la liste.

Éditer la partie 2: Une chose que vous pourriez essayer (si vous ne le ciblez pas correctement) est d'utiliser "input: reset" au lieu de ce que vous utilisez ... travailler pour savoir ce que le clic réel cible. Il suffit d’ouvrir les outils de développement/firebug, c’est quoi, jeté dedans 

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

et voir ce qui apparaît. et alors nous pouvons partir de là.

259
FullOnFlatWhite

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

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

C’est une de ces choses qui sont réellement plus faciles à faire en Javascript avec Vanilla que jQuery. jQuery n'a pas de méthode reset, mais l'élément HTML Form le permet. Vous pouvez donc réinitialiser tous les champs d'un formulaire comme celui-ci:

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

Si vous faites cela via jQuery (comme indiqué dans d'autres réponses ici: $('#configform')[0].reset()), le [0] récupère le même élément DOM de formulaire 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 extraire un élément de celle-ci, alors que vous utilisez l’élément directement avec Javascript Javascript.

42
Nick F

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

<input type="reset">

et tu as fini. Mais si vous utilisez vraiment le script {doit} _, notez que chaque contrôle de formulaire possède une propriété form qui fait référence au formulaire dans lequel il se trouve.

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

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

20
RobG

En utilisant jquery function .closest (element) et .find (...) .

Obtenir l’élément parent et rechercher le enfant .

Enfin, faites la fonction nécessaire.

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

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

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

<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 id = resetform comme suit

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

et le formulaire réinitialise Remarque: vous pouvez également masquer le bouton de réinitialisation avec id = resetform à l'aide de votre fichier css.

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

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

$('#AddRowform').trigger("reset"); 
$('#AddRowform select').trigger("change");

Le second réinitialisera select2

4
Ali Jamal
<button type="reset">Reset</reset>

Le moyen le plus simple que je puisse imaginer est robuste. Placez dans la balise de formulaire.

3
luminancedesign

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

0
ic3b3rg

Voici une solution simple avec Jquery. Cela fonctionne globalement. Regardez le code.

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

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

<button class="button clear" type="reset">Clear</button>
0
Ijharul Islam

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

Puis effacez le formulaire:

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