web-dev-qa-db-ja.com

$（ "..."）[0] .resetは関数ではありません... jQueryでフォームをリセットしています

JQueryを使用して一部のフォームをリセットしようとしていますが、問題が発生しています。関数やカスタムプラグインの作成を伴うソリューションは別として、私は何度も何度もリセットメソッドがjQueryの標準部分ではなく、標準JavaScriptの一部であることを発見し続けています。

とにかく、私の最初のアプローチは

$("#theForm").reset();

ここで、フォームのid = "theForm"。

Reset（）はjQueryの一部であると想定していたため、これは明らかに機能しませんでした。

次に試したのは

document.getElementById(theForm).reset();

どちらもうまくいきませんでした。私はjQueryを初めて使用するので、通常のJavaScriptとjQueryを混在させることができるかどうかわかりません。私はこれを言うための愚痴のように聞こえます。

とにかく、さらに調査を行った後、これらを実行することで、jQueryでreset（）を使用できることが何度も見つかりました...

$("#theForm")[0].reset();

または

$("#theForm").get(0).reset();

これらの2つのスニペットを含むすべての記事で、コメントの全員が機能しました。

私以外。

エラーコンソールは、私が書いたものが存在しないことを通知し続けます。私はすべてのコードをチェックしましたが、Wordの「リセット」の他のインスタンスはないため、それもそうではありません。

とにかく困った。

jqueryformsreset
15
user2426162

このスレッドの元の問題の解決策

次のようなHTMLフォームの場合：

_<form id="theForm">
</form>
_

document.getElementById("theForm").reset()を使用している場合、jsエラーが発生すると

reset（）は関数ではありません

その理由は、resetをnameまたはidとして持つ要素である可能性があります。私は同じ問題に直面しました。
要素をresetとして名前を付けると、reset（）関数がオーバーライドされます。

29
Sanjeev

この：

$("#theForm")[0].reset();

正常に動作します。ここで見てください： http://jsfiddle.net/tZ99a/1/

そのため、フォーム、またはボタンにスクリプトをアタッチする方法に問題があるはずです。

14
Diego Mijelshon

このエラーは、リセットボタン（またはその他のフォーム要素）にリセットという名前を付けると発生します-name="reset"。したがって、form.resetは、resetメソッドではなく、name="reset"を使用してDOM要素に解決されます。

デモname="reset"-コンソールを確認

$(function() {
    $('.reset1').on('click', function() {
        this.form.reset();
    });
  
    $('.reset2').on('click', function() {
        $('form')[0].reset();
    });
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<form>
  <input type="text" name="somename"/><br/>
  <input type="button" name="reset" class="reset1" value="Reset - form.reset()"/><br>
  <input type="button" name="reset" class="reset2" value="Reset - $('form')[0].reset()"/>
</form>

SAME DEMO BUT WITH name!="reset"-エラーなし;コードは機能します

$(function() {
    $('.reset1').on('click', function() {
        this.form.reset();
    });
  
    $('.reset2').on('click', function() {
        $('form')[0].reset();
    });
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<form>
  <input type="text" name="somename"/><br/>
  <input type="button" name="someothername" class="reset1" value="Reset - form.reset()"/><br>
  <input type="button" name="someothername" class="reset2" value="Reset - $('form')[0].reset()"/>
</form>

SAME DEMO BUT WITH id="reset"-コンソールを確認

$(function() {
    $('.reset1').on('click', function() {
        this.form.reset();
    });
  
    $('.reset2').on('click', function() {
        $('form')[0].reset();
    });
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<form>
  <input type="text" name="somename"/><br/>
  <input type="button" id="reset" class="reset1" value="Reset - form.reset()"/><br>
  <input type="button" id="reset" class="reset2" value="Reset - $('form')[0].reset()"/>
</form>
5
PeterKA

_"theForm"_がIDの場合、$('#theForm')[0]を使用する必要がありますか？悪い癖だと思います。 HTMLページにさらにフォームがある場合は、名前を使用します。 IDを使用する場合は、一意である必要があります。

ここにあなたのHTMLコードを提供することができれば素晴らしいでしょう:)

2
smilyface

'reset'という名前のフォーム要素がないことを確認してください。その場合は、名前を変更すれば.reset（）メソッドが機能します。それ以外の場合、document.getElementById（ "formId"）。resetは「reset」という名前のフォーム要素を選択します。そのため、reset（）メソッドは機能しません。 「オブジェクトは関数ではありません」のようなエラーメッセージが表示されます。

0
v.babak

これを試して：

$('#formData')[0].reset();
0
Hafiz Usman

問題は、フォームのリセットボタンIDが「リセット」に設定されている可能性が高いため、エラーメッセージが表示されます。

私は同じ問題を抱えていて、ついに理解し、私のフォームを次のように変更しました：

 
 form action = "bla" method = "post" id = "myform"> 
 ... 
 
/form>

リセットボタンのIDを変更することでうまくいきました。

0
user4426017