クリック提出後にフォームをリセットする

Question

連絡先フォームがあります。送信ボタンをクリックすると、.click（）を使用するとフォームがリセットされます。しかし、私が.submit（）を使うと何らかの理由でうまく動作しません。

ここにフォームのコードを示します。

<form id="foo"> 
     <div class="form_sides"> 
      <div class="form-group"> 
      <label for="Your_Name">Name</label> 
      <input type="text" class="form-control" name="name" id="name" aria-describedby="nameHelp" placeholder="" required> 
      </div> 
      <div class="form-group"> 
      <label for="Your_Email">Email</label> 
      <input type="email" name="email" class="form-control" id="email" placeholder="" required> 
      </div> 
      <div class="form-group"> 
      <label for="Your_Subject">Subject</label> 
      <input type="text" name="subject" class="form-control" id="subject" placeholder="" required> 
      </div> 
     </div> 
     <div class="form_sides"> 
      <div class="form-group"> 
      <label for="Your_Phone">Message</label> 
      <textarea class="form-control" id="message" name="message" rows="3" required></textarea> 
      </div> 
      <div class="form-group"> 
      <div id='success'></div> 
      <button id="btn_submit" type="submit" class="btn_submit">Submit</button> 
      </div> 
     </div> 
     </form> 

そして、ここで、この中に私はJavaScript

var reset = function(){ 
    setTimeout(function(){ 
     $('form')[0].reset(); 
    },3000); 
} 
$('.btn_submit').on('submit', function(){ 
    reset(); 
    console.log("debug"); 
}); 

ですが、私は（ただし.clickに、にconsole.logを得ることはありません）私ははconsole.logを得ますか。フォームがGoogleスプレッドシートに送信されています。また、それを見ながら、あなたがリセットをスムーズにする方法を教えてもらえれば、それは素晴らしいことでしょう。私は値の入力ボックスではなくフェードアウトしたい。事前に

おかげで、

Answer 1

あなたが提出したイベントにアタッチする場合は、実際のフォームに添付する必要があります。あなたがクリックしてそれをしたい場合は、ボタンにアタッチすることができます。ただし、ボタンのsubmitイベントは実行できません。

変更：

$('.btn_submit').on('submit', function(){ 
    reset(); 
    console.log("debug"); 
}); 

すべき：

$('#foo').on('submit', function(){ 
    reset(); 
    console.log("debug"); 
}); 

また、ボタンのクリックイベントにアタッチし、このコードを持つことができます。

$('.btn_submit').on('click', function(){ 
    reset(); 
    console.log("debug"); 
});