フォームリセットの解決方法 リセットは機能エラーではありません

実は、私はずっと前にこのバグに遭遇しており、その結果、最近開発中に再びこのバグに遭遇し、たとえば、Ajaxを使用してフォームを送信した後、コンテンツをリセットする必要があり、時間がかかりました。ユーザーの操作を避けるためにフォームを再送信する場合、通常のフォームの HTML 構造は次のとおりです:

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

単に JavaScript を使用してリセットする必要がある場合は、document.getElementById('LoginForm').reset( ) を使用して、jQuery を使用してそれを実現します。次に、$('#LoginForm')[0].reset() または $('#LoginForm').trigger("reset ") ですが、上記の HTML で設計されたフォームの場合、これらのリセット フォーム メソッドは無効です。 FireBug のデバッグでは、...reset は関数ではありません というメッセージが表示されます。ここで何が問題になっていますか?小さな悪い習慣が重大な問題を引き起こすとは決して思わないことがありますが、インターネットを長時間検索した結果、stackoverflow。問題はリセット ボタンにあることがわかりました。リセット ボタンによって実装された HTML に注目してみましょう。 document.getElementById('LoginForm').reset() 来实现，使用jQuery则使用$('#LoginForm')[0].reset() 或者 $('#LoginForm').trigger("reset") ，但是对于上述以HTML设计的表单来说，这些reset表单的方法均失效了！FireBug调试提示...reset is not a function ，这里问题出在哪里了呢？有时候你永远想不到一个小小的坏习惯会带来相当的麻烦，在纠结许久后搜索网络，在stackoverflow找到了答案。原来问题出在了reset按钮上，我们把reset按钮实现的HTML聚焦一下：

<input type="reset" id="reset" name="reset" value="Reset" />

问题就在于id="reset"和name="reset"，这里的reset属性覆盖了原来的reset方法，自然无法调用并提示is not a function，解决的办法也很简单，避免用reset关键词来命名reset按钮的name和id属性。比如下面的命名方式则比较保险：

<input type="reset" id="ResetButton" name="ResetButton" value="Reset" />

好了，一个由命名带来的小问题就这么解决了，这时我注意到了submit按钮，其id="submit"并且name="submit"，会不会导致form表单的submit()方法失效呢？由于我采用的是Ajax方式提交所以这个问题也没有深究，或许把id="submit"和name="submit"也改成不同的名字，比如id="SubmitButton"和name="SubmitButton"rrreee

問題は id="reset" と name="reset" にあります。 " 、ここでの reset 属性は、元の reset メソッドをカバーします。当然、呼び出すことはできず、 は関数ではありません というプロンプトが表示されます。解決策も非常に簡単です。reset の name 属性と id 属性に名前を付けるために reset キーワードを使用しないでください。ボタン。たとえば、次の名前付け方法の方が安全です。 🎜rrreee🎜 さて、名前付けによって引き起こされる小さな問題は解決されました。この時点で、id="submit" と name="submit" とすると、フォームの submit() メソッドが失敗しますか?送信に Ajax を使用したため、この問題については詳しく説明しなかったのですが、おそらく id="submit" と name="submit" を次のような別の名前に変更しました。 id="SubmitButton" と name="SubmitButton" の方が良いでしょう。 🎜

以上がフォームリセットの解決方法 リセットは機能エラーではありませんの詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。