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

Question

J'ai eu code de travail qui pourrait réinitialiser mon formulaire quand je clique sur un bouton de réinitialisation. Cependant, au bout de mon code est de plus en plus longues, 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 mon jQuery:

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

Est-il une source que je devrais inclure dans mes codes pour que l' .reset() méthode de travail? Auparavant, j'ai été en utilisant:

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

et l' .reset() méthode de travail.

Actuellement, je suis en utilisant

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

Il ne peut pas être une raison?

Answer 1

vous pouvez essayer d'utiliser reset () Reference Link

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

Answer 2

http://jsfiddle.net/8zLLn/

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

Mettre en JS fiddle. Il fonctionne comme prévu.

Donc, aucune des questions mentionnées ci-dessus sont en faute. Vous avez peut-être un conflit d'ID de problème? Est cliquez sur exécuter réellement?

Edit: (parce que je suis triste de sac sans commentaires) Il n'est pas un problème directement avec votre code. Cela fonctionne bien lorsque vous sortez du contexte de la page que vous êtes en train d'utiliser, de sorte que, au lieu d'être quelque chose avec le particulier jQuery/javascript & attribuée données de formulaire, il doit être quelque chose d'autre. J'aimerais commencer coupant le code autour d'elle et essayer de trouver où elle se passe. Je veux dire, juste à "assurez-vous", je suppose que vous pourriez...

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

dans la fonction de clic et assurez-vous que c'est le ciblage de la bonne forme...

et si elle l'est, ça doit être quelque chose qui n'est pas listée ici.

modifier la partie 2: Une chose que vous pourriez essayer (si ce n'est pas de cibler correctement) est l'utilisation "d'entrée:reset" au lieu de ce que vous utilisez... aussi, je vous suggère parce que ce n'est pas la cible incorrecte de travail pour savoir ce que le réel sur cible. Il suffit d'ouvrir firebug/outils de développement, whathave vous, mélanger dans

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

et voir ce qui apparaît. et puis on peut aller à partir de là.

Answer 3

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

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

Answer 4

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 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 vous vous trouvez, vous pouvez donc:

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

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

Answer 5

J'ai enfin résolu le problème !! @RobG avait raison sur le form étiquette et table tag. la balise form doit être placée en dehors 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!