Comment réinitialiser un formulaire en utilisant jQuery avec la méthode .reset()

J'avais un code fonctionnel qui pouvait réinitialiser mon formulaire lorsque je clique sur un bouton de réinitialisation. Cependant, après que mon code se soit allongé, je me suis rendu compte qu&#8217il ne fonctionnait 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.

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 ?

halfer
Question modifiée 5 janvier 2014 в 9:57
Programmation
javascript reset forms jquery
9 mai 2013 в 1:02
18 vues

http://jsfiddle.net/8zLLn/

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

Je l'ai mis dans JS fiddle. Ça a fonctionné comme prévu.

Donc, aucun des problèmes mentionnés ci-dessus n'est en cause ici. Peut-être avez-vous un problème de conflit d'identité ? Le clic est-il réellement exécuté ?

Edit : (parce que je suis un pauvre type qui ne sait pas commenter) Ce n'est pas un problème directement lié à votre code. Il fonctionne bien lorsque vous le sortez du contexte de la page que vous utilisez actuellement, donc, au lieu que ce soit quelque chose avec le jQuery/javascript particulier et les données du formulaire attribué, ce doit être quelque chose d'autre. Je commencerais à découper le code qui l'entoure pour essayer de trouver où cela se passe. Enfin, juste pour être sûr, je suppose que vous pourriez...

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

dans la fonction de clic et t'assurer qu'elle cible le bon formulaire...

et si c'est le cas, ça doit être quelque chose qui n'est pas listé ici.

edit part 2 : Une chose que vous pourriez essayer (si la cible n'est pas correcte) est d'utiliser "input:reset&quot ; au lieu de ce que vous utilisez... également, je suggérerais, puisque ce n'est pas la cible qui ne fonctionne pas correctement, de trouver ce que le clic actuel cible. Il suffit d'ouvrir firebug/developer tools, ce que vous voulez, de jeter dans

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

et vois ce qui s'affiche. Et on pourra partir de là.

FullOnFlatWhite
Réponse modifiée 9 mai 2013 в 2:25
Commentaires (17)

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

<input type="reset">

et le tour est joué. Mais si vous devez absolument utiliser un script, 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.

Commentaires (7)

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 avez localisé le problème.

Commentaires (2)