JavaScript

フォームの値を出力!jQueryでchangeを使う方法を解説

jQueryを使うとHTML/CSSのみで作られたWebページに動きをつけることができます。動きをつけるとWebページ中の文章を変えたり、画像を切り替えたり、レイアウトや文字色などのCSSを切り替えたりできます。

jQueryの機能として、フォームに入力された値をコンソール上に表示させたり、ページ上に表示させる方法としてchangeメソッドがあります。入力の確認用にボックスの値を取得して表示させる場合などに用いられます。

本記事ではchangeメソッドを使ってフォームに入力された文章などをchangeメソッドを用いて出力する方法を解説します。本記事では出力をコンソール上に行っているので、コードを実行する際にはディベロッパーツールでコンソールを開いておくことをおすすめします。

changeメソッドでできること

changeメソッドはHTMLのフォームタグで使われる要素が変化した時に発生するメソッドです。input、textarea、selectに変化があったときにイベント処理を実行します。例えば、inputのテキストボックス内に文字を入れて、フォーカスを外すとchangeメソッド内で設定したイベント処理を実行します。

他にも、クリックイベントと合わせて使うことも可能です。ボタンをクリックするとラジオボタンが増えて、追加されたラジオボタンに対してもchangeメソッドが発生させることができます。

changeメソッドの基本構文

changeメソッドの基本構文は以下の通りです。

$(“セレクタ”).change(処理);

セレクタには変化が起きたときの処理をさせたい要素を指定します。処理はfunction(){処理}で書くことがほとんどなので、こちらの形で覚えておくことをおすすめします。例としてinputタグの入力を確認したら、コンソールに「入力されました」と出します。

$(“input”).change(function(){
  console.log(“入力されました”);
)};

changeで処理を発生させる

テキスト

<input type=text>や<textarea>で作られるようなテキストボックスの場合はフォーカスを外したときに処理が始まります。つまり、テキストボックス内にカーソルをセットして、外したら処理が発生します。また、Enterキーを押しても同様です。

テキストの場合は入力をしたときに出力されていると勘違いするケースがありますが、入力が完了した時点で変化したとして処理が開始されます。

ラジオボタン

ラジオボタンの場合は選択肢が変わったときに処理が始まります。このとき、気を付けることは変更するたびに処理が実行される点です。ラジオボタンを何回も変更したら処理が発生し続けます。

前の処理を消す処理を入れておかないとどんどん処理が追加されていきます。例えば、ラジオボタンのvalueの値を取得して出力する場合、何度変更すると変化の度に出力されていきます。

セレクトボックス

セレクトボックスの場合はセレクトボックスの中身が変更されたときに処理が発生します。ラジオボタンと同様に選択肢が変わるたびに処理時が実行されます。前の処理が残ったまま処理が繰り返されるのも同様です。

クリックなどのイベントでchangeを使う方法

changeはクリックイベントなどと組み合わせて使われることが多いです。もし、ラジオボタンやセレクトボックスのように変化するたびに処理を実行したら間違えた場合、処理が残ったままになります。

クリックボタンと併用することでボタンや選択肢の間違えが合ってもすぐに処理が実行されないので、確認するステップを踏むことができます。つまり、利用するユーザーにとって優しい設計となります。

変化させる度に処理を実行しては何度もプログラムが動くため、効率的とは言えません。changeに限らず、処理は必要な時に必要なだけの処理を行うのが理想です。そのためにもクリックイベントと併用してchangeメソッドを利用することをおすすめします。

クリックイベントと併用する場合には以下のようなコードとなります。

$(“button”).on(“click”,function(){
  $(“input).change(function(){
    console.log(“クリックで変化します”);
  });
});

上記のようにコードを書けば任意のタイミングでchangeメソッドを実行することができます。間違え防止や効率的にプログラムを動かすためにも使い方を覚えておくことをおすすめします。

まとめ

jQueryでchangeメソッドを使う方法について解説しました。changeメソッドは使いどころが難しいですが、入力状態の確認に使えるなど、Webページを使う上では覚えておいて損はないメソッドの1つです。

優先的にはonやappend、cssなどのメソッドを覚えるべきだと思います。しかし、よく使うメソッドを理解した後にchangeメソッドを覚えておくことをおすすめします。