jQueryでフォームを取得する方法

フォームの情報を取得するために

結論、submitというイベントを使います。
submitイベントはフォームが送信された時に呼び出されます。
以下のようなウェブページを準備しました。

この送信ボタンを押した際の流れをみていきたいので
以下のようなコードを施しています。

$(function() {
  $("form").on("submit", function() {
    console.log("送信ボタンが押されました");
  });
});

これで送信ボタンが押された際にコンソール画面に
「送信ボタンが押されました」と表示されるはずです。
しかし、実際にやってみると一瞬で表示されて、
一瞬にして消えてしまうはずです。

preventDefault()

消えてしまう原因を考えてみましょう。
送信ボタンを押した後、ウェブページがリロードされてしまうため
初期の状態に戻ってしまうからです。
「この初期の状態に戻る」というイベントをキャンセルしたいため、preventDefault()を用います。
なので以下のコードにしてみましょう

$(function() {
  $('form').on('submit', function(a) {
    console.log('送信ボタンが押されました');
    a.preventDefault();
  });
});

この関数の流れは引数aにpreventDefault()を入れています。
この中身をもっと詳しくみるためにconsole.logを使ってみていきます。
以下、検証画面です。

送信しましたの下のところにconsole.log(a)の結果が書いています。 これをイベントオブジェクトと言うのですがイベントの発生元の要素や押されたキーの種類などを知ることができます。