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

270

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?

yvonnezoe
la source
pouvez-vous donner un exemple de non fonctionnement? l'un des champs est-il réinitialisé?
Arun P Johny
c'est quelque chose comme ça mais ça fonctionne bien ici jsfiddle.net/chJ8B :( probablement à cause d'autres parties du script? mais je n'ai qu'une seule forme
yvonnezoe
ma question est de savoir si aucun champ n'est réinitialisé / certains fonctionnent
Arun P Johny
13
Votre code HTML n'est pas valide . Un formulaire ne peut pas être un enfant d'un élément TBODY, et un TR ne peut pas être un enfant d'un élément FORM. Mettez les balises de formulaire en dehors du tableau (c'est-à-dire mettez le tableau dans le formulaire). Il est possible que le formulaire soit déplacé en dehors du tableau, mais les contrôles de formulaire restent dans les cellules, ils ne sont donc plus dans le formulaire.
RobG
@RobG: O bon point! je vais essayer ça. Merci! j'aurais pu manquer ce commentaire utile si je ne reviens pas ici pour obtenir mon lien violon: s
yvonnezoe

Réponses:

464

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

$('#form_id').trigger("reset");
SagarPPanchal
la source
2
Tout simplement magique et simple! Très apprécié pour le partage.
Ajay Kumar
chers électeurs, pourriez-vous s'il vous plaît me dire la raison de vos votes négatifs, afin que je puisse améliorer ma réponse.
SagarPPanchal
J'utilise $ ('. Profile_img_form'). Trigger ('reset'); j'ai ajouté la classe nommée profile_img_form sur mon formulaire, puis je l'ai appelée. il ne réinitialise pas mon formulaire et renvoie un message d'erreur comme Uncaught SyntaxError: Expression régulière non valide: /(^|\.)bs\.(?:.*\\.|)fileinput(\.|$)/: Veuillez suggérer ce qui est problème. Merci.
Kamlesh
@Kamlesh ça devrait marcher, j'ai créé une démo pour vous, cliquez sur jsfiddle.net/Lkt4eq9y/2
SagarPPanchal
1
Merci d'avoir répondu. Heures enregistrées sur Google / SO'ing :)
Anjana Silva
276

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

FullOnFlatWhite
la source
aucun ID conflictuel :( j'essaie de sélectionner couche par couche et de vérifier si le clic fonctionne
yvonnezoe
1
hmm semble que le clic ne fonctionne pas! j'ai ajouté $('#ptest').html("clicked reset")dans le clic (fonction () {}); où il devrait montrer "clicked reset" mais il ne s'est pas présenté
yvonnezoe
j'ai une question ici. chaque fois que j'utilise console.log, je ne sais pas où chercher. j'utilise Python IDLE et un terminal pour exécuter le script python. le javascript est dedans. de toute façon, quand j'utilise `alert ($ ('# configform') [0]), cela me donne [object HTMLFormElement]
yvonnezoe
1
Essayez d'utiliser alert (JSON.stringify ($ '# configform') [0])). Alert ne se soucie pas beaucoup des jolis objets d'impression (ou de vous dire ce qu'il contient). Il vous fait juste savoir que c'est un objet.
FullOnFlatWhite
1
@DylanChensky la magie de jQuery est que tout est un ensemble (tableau). Tout comme si vous utilisiez un tableau normal dans jQuery, [0]sélectionne le premier élément. Mais dans jQuery, il sélectionne le html réel de l'élément. Donc, [0]vous donne le html, qui vous permet d'appeler la méthode html, pas jQuery, appelée reset. Voir la réponse de @kevin ci-dessous pour plus d'informations.
FullOnFlatWhite
110

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()
Kevin
la source
1
Cela fonctionne et je suis d'accord, jQuery n'a pas de méthode reset (). Vous pouvez voir comment le faire avec JavaScript natif sur w3school doc: w3schools.com/jsref/met_form_reset.asp
serfer2
2
Je voudrais noter que cela ne fera que réinitialiser le formulaire, pas l'effacer. C'est-à-dire, si le formulaire avait des valeurs envoyées avec la demande, celles-ci seront restaurées.
Protector un
Je voudrais ajouter un commentaire concernant l'espace réservé, le rendu initial du formulaire, les éléments du formulaire ont des valeurs d'espace réservé, après cette réinitialisation, quel que soit l'espace réservé affiché à nouveau, mais la valeur devient vide, alors soyez prudent lors de la validation du formulaire. J'ajoutais une validation de formulaire générique pour vérifier que la valeur de l'espace réservé est par défaut.
Ramratan Gupta
48

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

Nick F
la source
23

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.

RobG
la source
tu veux dire simplement que cette ligne fera l'affaire? oO est donc mon html ci-dessus correct?
yvonnezoe
Définissez "ne fonctionne pas". Quelle erreur obtenez-vous? Qu'est-ce qui ne fonctionne pas? Les boutons de réinitialisation font partie des formulaires HTML depuis toujours, ils fonctionnent.
RobG
1
"ne fonctionne pas" - il ne réinitialise rien, aucun changement n'a été vu dans le formulaire.
yvonnezoe
1
Quelque chose à noter est que «réinitialiser» ne signifie pas «mon formulaire est effacé». Ce que fait réellement la sémantique de "reset", c'est de ramener tous les éléments "form" à leurs attributs "value" d'origine. Cela m'a dérouté pendant quelques minutes au moins!
jocull
@ jocull: lorsque tout le reste échoue, il existe toujours la version W3C ou WHATWG de la norme HTML. ;-)
RobG
21

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!

yvonnezoe
la source
3
vous pouvez généralement confirmer que cela se produit en inspectant le code source (sans afficher la source de la page, car cela montrera ce qui a été généré, mais plutôt en utilisant quelque chose comme Developer Tools <kbd> F12 </kbd>), qui vous montre "ce que le le navigateur voit "- dans ce cas, il vous montrera (au moins dans Chrome) que le formtag a été automatiquement fermé au début du tbody, à l'exclusion des éléments d'entrée.
drzaus
vérifier la compatibilité: developer.mozilla.org/en-US/docs/Web/HTML/Element/input/reset
Diego Avila
16

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');
});
fausto
la source
13

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("");
aldrien.h
la source
4
Bien que ce bloc de code puisse répondre à la question, vous devez toujours expliquer pourquoi il le fait.
Sascha Wolf
1
$("#form").find("input[type=text], textarea").val("");je l'ai fait de cette façon
Bira
11

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
Ali Jamal
la source
5

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

Kiran Kanzar
la source
4

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>
Chuksy
la source
N'oubliez pas de le cacher ... pour en faire une forme plus moderne. <input type = 'reset' id = 'resetform' value = 'reset' / style = 'display: none;'>
mangas
3

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>
Ijharul Islam
la source
3

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();
Vivek Pawar
la source
2
<button type="reset">Reset</reset>

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

luminancedesign
la source
1

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("");
        });
    });
RainyTears
la source
Il semble y avoir beaucoup de code spécifique au framework ici. Je recommande d'éviter de telles choses lorsque vous répondez à des questions sur SO, car la question ne spécifiait pas qu'ils utilisaient un cadre autre que jQuery
Lazerbeak12345
0

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.

ic3b3rg
la source
Le seul autre problème auquel je peux penser est que vous avez une autre forme avec le même id ( configform). Vous devriez faire quelques recherches en utilisant la console. Essayez d'abord $. Si vous utilisez Chrome, taper $dans la console activera une liste contextuelle si jQuery est chargé. Si vous tapez $et appuyez sur retour, il évaluera une fonction si jQuery est chargé. Essayez ensuite $("#configform"). Faites un clic droit sur le résultat et sélectionnez Reveal in Elements panel.
ic3b3rg
merci :) mais je n'ai pas de chrome. est-ce la même façon de le faire en utilisant Firebug? (je l'ai installé mais ne l'utilise jamais auparavant)
yvonnezoe