フォームが送信されたら、イベントが発火するようにする

message.js

$(function(){
  $('#new_message').on('submit', function(e){
    console.log('hoge');
    e.preventDefault()
  });
});

1. メッセージ送信フォームをJavaScriptで取得する

form_forで作成したフォームにはあらかじめid属性が付与されている。ブラウザの要素検証を利用して、メッセージ送信フォームにどんなid属性がついているかを確認する。

$(function(){
$('#new_message').on('submit', function(e){

「id(#mew_meaasge)の、submit(フォームが送信)されたときのイベント処理」をfunction以降に記述する。

2. console.logを用いて、イベント発火しているか確認

console.log('hoge');

consoleに'hoge'を表示させる

3. フォーム送信を停止させる

e.preventDefault()

デフォルトのフォーム送信により画面が遷移してしまう。非同期通信を行うために、preventDefault()を使用してデフォルトのイベントを止める。

参照

JavaScriptのpreventDefault()って難しくない？preventDefault()を使うための前提知識

【jQuery入門】on()によるイベント処理の使い方まとめ！