Maison > interface Web > js tutoriel > le corps du texte

Comment résoudre la réinitialisation du formulaire n'est pas une erreur de fonction

一个新手
Libérer: 2017-10-14 09:42:57
original
2931 Les gens l'ont consulté

En fait, j'ai rencontré ce bug il y a longtemps. En conséquence, j'ai à nouveau rencontré ce bug lors d'un développement récent, et cela m'a également coûté du temps. Par exemple, après avoir soumis le formulaire en utilisant Ajax, j'ai dû le réinitialiser. les différents contenus du formulaire du point de vue de l'interaction. Pour éviter les soumissions répétées par les utilisateurs, la structure HTML normale du formulaire est la suivante :

<form action="" method="post" id="LoginForm">
  <input type="text" name="username" value="" />
  <input type="password" name="password" value="" />
  <input type="submit" id="submit" name="submit" value="Login" />
  <input type="reset" id="reset" name="reset" value="Reset" />
</form>
Copier après la connexion

Si vous avez simplement besoin d'utiliser JavaScript pour réinitialiser, vous pouvez utilisez document.getElementById(&#39;LoginForm&#39;).reset() pour y parvenir. Si vous utilisez jQuery, utilisez $(&#39;#LoginForm&#39;)[0].reset() ou $(&#39;#LoginForm&#39;).trigger("reset") , mais pour les formulaires ci-dessus conçus en HTML, ces méthodes de réinitialisation de formulaire ne sont pas valides ! Astuce de débogage FireBug ...reset is not a function, quel est le problème ici ? Parfois, on ne pense jamais qu'une petite mauvaise habitude causera des problèmes considérables. Après avoir longtemps lutté, j'ai cherché sur Internet et j'ai trouvé la réponse sur stackoverflow . Il s'avère que le problème réside dans le bouton de réinitialisation. Concentrons-nous sur le HTML implémenté par le bouton de réinitialisation :

<input type="reset" id="reset" name="reset" value="Reset" />
Copier après la connexion

Le problème réside dans id="reset" et name="reset" L'attribut reset ici. couvre l'original < La méthode 🎜> ne peut naturellement pas être appelée et invite reset La solution est également très simple. Évitez d'utiliser le mot-clé is not a function pour nommer les attributs reset et reset du bouton name. Par exemple, la méthode de dénomination suivante est plus sûre : id

<input type="reset" id="ResetButton" name="ResetButton" value="Reset" />
Copier après la connexion
Eh bien, un petit problème causé par la dénomination a été résolu. À ce moment-là, j'ai remarqué le bouton de soumission, qui a

et id="submit". , cela entraînera-t-il l'échec de la méthode name="submit" du formulaire ? Depuis que j'ai utilisé Ajax pour soumettre, je n'ai pas approfondi ce problème. Peut-être qu'il serait préférable de remplacer submit() et id="submit" par des noms différents, tels que name="submit" et id="SubmitButton". name="SubmitButton"

Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!

Étiquettes associées:
source:php.cn
Déclaration de ce site Web
Le contenu de cet article est volontairement contribué par les internautes et les droits d'auteur appartiennent à l'auteur original. Ce site n'assume aucune responsabilité légale correspondante. Si vous trouvez un contenu suspecté de plagiat ou de contrefaçon, veuillez contacter admin@php.cn
Tutoriels populaires
Plus>
Derniers téléchargements
Plus>
effets Web
Code source du site Web
Matériel du site Web
Modèle frontal