Jqueryでフォームをリセットする

Question

JavaとTapestryで開発しているWebアプリケーションでJqueryでフォームをリセットしようとしています。問題は、Tapestryがフォームをリセットするための方法を提供していないため、JSモジュールを作成する必要があることです。

私は、IDの異なると私のアプリケーションでは約4-5のフォームを持っているので、私はこれを試してみました：

define(["jquery"], function($) { 

    return function() { 
     $("form").on("submit", function() { 
      if (!$("form-group").hasClass("has-errors") && !$("div").hasClass("alert")){ 
       $("form").reset(); 
      } 
     }); 
    } 

}) 

これはjQueryを使って私の最初の時間ですので、それがない作品を行います。私がしようとしているのは、フォームの送信ボタンが押されたときにコールバックを設定することです。 これは、フォーム内の私のボタンの宣言です：私は、各ページに一つだけのフォームを持っている

<div class="col-md-offset-5 col-md-3"><button class="btn btn-block btn-primary" type="submit"><span class="glyphicon glyphicon-plus"></span> Add 

。私はこれがかなりシンプルだと思うが、私はそれを働かせることができない。誰でも私にこれにいくつかの助けを与えることができますか？ありがとう。

Answer 1

.reset()メソッドはjQueryメソッドではないため、jQueryオブジェクトでは機能しません。ただし、jQueryオブジェクトのDOMノードを参照し、ネイティブJSメソッド（$("form")[0].reset();）を使用できます。

define(["jquery"], function($) { 

    return function() { 
     $("form").on("submit", function() { 
      if (!$("form-group").hasClass("has-errors") && !$("div").hasClass("alert")){ 
       $("form")[0].reset(); 
      } 
     }); 
    } 

}) 

はしかし、私は一般的に不要と実際、detrimental to user experienceでフォームのリセットボタンを検討してください。ユーザーがデータを完全に消去する意図がないフォームで入力を開始したとき、リセットボタンが誤ってクリックされた場合（特に、アクションUIデザインによって明確にされていない）、ユーザーの入力を欲求不満（そして元に戻すことができない）のほうがずっと消去します。

Answer 2

リセット機能（まだ）はjQueryに存在しません。しかし、フォームのリセットを実現する方法はいくつかあります。以下のコードは、フォームのすべての要素をループし、DOM reset JavaScriptメソッドを呼び出します。あなたを実装する

jQuery.fn.reset = function() { 
    jQuery(this).each(function() { 
    this.reset(); 
    }); 
} 

別の方法：あなたはこのような独自のresetメソッドを実装する必要があります。この場合、

jQuery("#form").reset(); 

：もっと簡単な方法のような何かをするだろう

jQuery('#form').each(function(){ 
    this.reset(); 
}); 

自身のresetフォームメソッドは：

jQuery.fn.reset = function(fn) { 
    return fn ? this.bind("reset", fn) : this.trigger("reset"); 
}; 

これは、あなたがreset機能にコードを添付できるようになる：あなたは（まだこれは物事を行う方法をお勧めします）タイプresetの簡単なHTMLの入力を使用することができます

jQuery("#form").reset(function(){ 
    /* some other code */ 
}); 

- それがどうなりますJavaScriptが無効になっているブラウザでも同じです。