【10分でマスター】onChangeでフォームの項目をコントロールしよう

Kotono
書いた人 Kotono


侍エンジニア塾ブログは、未経験からWebアプリ開発と仕事獲得をサポートする
侍エンジニア塾のオウンドメディアです。
プログラミング学習を覗き見

こんにちは、Kotonoです!

みなさんのサイトにはお問い合わせフォームはありますか?
お問い合わせフォームにJavaScriptで色々処理を入れると、ユーザーの使い勝手がぐんと上がりますよね。

でも項目の表示非表示がうまくできない…
この項目にチェックが入っていたら、下の項目は非表示にしたい!

そんなお悩みを解決していきます。
今回はJavaScriptの、onChangeというイベントハンドラーについてざっくりと解説していきたいと思います。

この記事は下記の流れで進めていきます。

【基礎】onChangeイベントについて
【基礎】テキストボックスでのonChange
【基礎】チェックボックスでのonChange
【基礎】セレクトボックスでのonChange
【発展】Clickイベントと組み合わせよう

onChangeイベントを使うことによって、フォームの内容が変更された時の処理が行えるようになります。

ぜひ覚えていってください!

onChangeイベントについて

では、まずはonChangeイベントそのものについて学んでいきましょう!

onChangeとは?

そもそもonChangeイベントって何か知っていますか?

イベントというのは、簡単にいうと、ドキュメント内で起こる「出来事」のことです。

私たちの日常にも「イベント」や「出来事」が起きますよね。

ドキュメント内でも同じで、様々な事が起こりうる環境なのです。

onChangeとは、フォーム内のエレメント(要素)の内容が変更された時に起こるイベント処理の事です。

ユーザーがテキストボックスに書き込んだり、セレクトボックスでオプションを選択したりなどの行動によって、発動するイベントを処理する事ができます。

「onChange」3通りの書き方

onChangeはその用途や目的に応じて3通りの書き方があるので、ここでその概要を確認しておきましょう!

① フォーム要素のonchange属性を使う

あらかじめ定義しておいた関数を、フォーム要素のタグ内から直接呼び出す書き方で、最も一般的で簡単な方法です。

この場合myfuncがその関数であり、イベントが発動すると実行されます。

② onChangeプロパティを使う

この場合はドット(.)を使い、onchangeプロパティの値として発動してほしい関数を代入します。

1つのイベントハンドラーに対して、1つの処理を行う際に有効な方法です。

③ addEventListenerの使用

addEventListenerを使って、フォーム内にある任意の要素にイベントリスナーを登録する方法です。

こちらは、1つのイベントに対して複数の処理を紐付けられます。

今回の記事では①のフォーム要素のonchange属性を使ったテクニックをご紹介しますね。

テキストボックスでのonChange

では、ここから実践編です。

まずはテキストボックスでonChangeイベントについて解説していきましょう。

テキストボックスとは?

テキストボックスとは、パスワードや複数行の長文を入力したりするときに使うフォーム要素のひとつです。

HTML<input type=”text”><textarea>〜</textarea>と書くと表示されるものですね。

名前や住所、お問い合わせ内容などの項目によく使われている、汎用的な入力エリアです。

onChangeの基本的な使い方として、実際の事例を見てみましょう。

type=”text”の場合

inputタグのタイプがtype=”text”の要素は、ユーザーがフォーム内に文字を入力できるスペースの事を指します。

基本的には、onChangeを使用したい場合は、以下のコードのように設定します。

この場合、イベントが発動するとJavaScriptコンソールにメッセージが表示されるようになります。

onchange属性にmyfunc(this.value)とありますが、この場合this.valueとはテキストボックス内に入力された文字列のことを意味します。

上記サンプルコードをブラウザで開くと、文字入力のフォームが表示されるので何か文字を入力してみましょう。

2017-06-13 (5)

input要素に文字を入力後、フォーカスが外れたタイミングでイベントが発動し、コンソール画面にメッセージが表示されたのがわかります。

2017-06-13 (9)

type=”textarea”の場合

textareaとはtextとほぼ何も変わりません。textarea複数行の入力を行える要素のことを指します。

以下のようにテキストエリア要素を作って、何か中に入力してみましょう。

上記コードではtextとは違い、inputタグではなく専用のテキストエリアタグを使用しています。

テキストエリアの中に書き込むと、以下のようにコンソールにメッセージが表示されます。

2017-06-13 (10)

実用例:入力されていたらボタンを表示しよう

では、もっと具体的な実用例を見てみましょう。

例えばテキストエリアが入力必須項目だった場合、入力しないと送信ボタンが表示されない仕様というのもありですね。

onChangeを使えば、それが簡単に実装できちゃいます。

See the Pen onchange by 河野七海 (@kouno73) on CodePen.0

ただ、この状態だとユーザーがボタンを探し回ってしまうかもしれないので、入力すれば表示されることをどこかに書いておいた方がいいでしょう。

チェックボックスでのonChange

チェックボックスとは?

チェックボックスとは、複数の選択肢の中から項目を選択するものです。

大体は、項目の左側にある四角の空白にチェックマークを入れることによって、選択が出来ます。

基本的にチェックボックスは複数選択を想定したチェック項目です。
どれか1つだけを選ばせたい場合は、セレクトラジオボタンを使うのがベストです。

使い方

次のサンプルでは、チェックボックス内の項目にチェックを入れた時にイベントが発動します。

テキストボックスのケースと違う点は、チェックを入れたり外したりする時にイベントが発動するという点です。

今回は、項目を増やす度にinput要素を作成しているので、各項目を選択するたびに違う関数を呼び起こすことも可能です。

上記のサンプルコードを実行すると、このようにセレクトボックスが表示されます。

2017-06-13 (7)

項目を選択すると、このように、コンソールにメッセージが表示されます。

2017-06-13 (12)

実用例:チェックされたら項目を増やしてみよう

では、実用例を見ていきましょう。

例えば、チェックされた内容には追加情報の入力が必要な場合、入力項目の表示非表示なんてこともできちゃいます。

See the Pen onchange2 by 河野七海 (@kouno73) on CodePen.0

余計な項目を非表示にできるので、ユーザーも入力内容のチェックがしやすくなりますね。

セレクトでのonChange

最後に、セレクトとonChangeの組み合わせについて解説していきます!

セレクトとは?

セレクトとはいわゆるプルダウンメニューのことです。

複数の選択肢の中から、ひとつを選択するような形になります。

よく住所の都道府県を入力するのに使われていますね。

使い方

セレクト要素を選択したときにメッセージを表示してみました。

先ほどのサンプルコードと同様に、呼び起こす関数をonChange属性の値に設定します。

コンソールに表示されるメッセージには、選択した項目の番号も表示させてみました。

選択した項目の順番を表示させるには、selectedIndexを使います。

また、コード内ではvalue変数にプルダウンメニュー内の各項目の名前を代入しています。

サンプルコードをブラウザで開くと、プルダウンメニューが表示されます。

2017-06-13 (6)

項目を選択すると、コンソールにメッセージが表示されます。選択した項目の順番も表示されます。

2017-06-13 (11)

実用例:セレクトされたら関連項目を表示しよう

では、もっと実践的な例を出していきましょう。

セレクトはいろんな項目が入れられますね。
その項目の中から任意のものを選ぶと、それと関連した項目や情報が表示されるようにしてみました。

See the Pen onchange3 by 河野七海 (@kouno73) on CodePen.0

うまく紐づけられると、ピンポイントで必要な情報をお届けできるので、なかなか便利ですね。

【発展】Clickイベントと組み合わせよう

フォームの項目操作はonChangeだけでなくonClickイベントと組み合わせるとより幅が広がります。

onClickイベントクリックされたら発動するイベントハンドラーです。

組み合わせることで、クリックされて、フォームの中身が変わったらという流れで、2段階のイベントを取得することができます

なので、こんなものも作れちゃいます

See the Pen onchange4 by 河野七海 (@kouno73) on CodePen.0

onClickイベントで、全てを選択をチェックしたら、チェックボックスに全ての項目が入るようにしました。
そこでonChangeイベントが発動し、隠していた項目を表示するという仕様です。

このように、それぞれの動作を連携して動かすのもいいですね。
ぜひonChangeイベントだけでなく、onClickイベントも活用してみてください

onClickイベントについてもっと詳しく知りたい方は、下記の記事も読んでみてください。
>>クリックされたらイベント発動!クリックイベントとは?

まとめ

いかがでしたか?

今回は、onChangeのイベントハンドラーについて学習しました。

これらのサンプルコードで使用したinputtextareaselectなどの要素はとても頻繁に使用する事があると思うので、覚えて損はないですよね。

このようにonChangeなどのイベント処理をマスターすることで、よりダイナミックなプログラムが書けるようになります。

ぜひonChangeをはじめ、様々なイベント処理を習得してみてくださいね。

JavaScriptカリキュラム無料公開中!

この記事はJavaScript入門完全攻略ガイド【基礎学習/アプリ開発/仕事獲得】の一部になります。このカリキュラムは、プログラミング入門者が、JavaScriptの基礎学習からアプリ開発、さらには仕事獲得まで体系的に学べる内容となっています。

JavaScript学習に必要な情報を一つにまとめていますので効率よくJavaScriptを学ぶことが出来ます。この機会に是非活用していただければと思います。


33歳、未経験だった僕がフリーエンジニアになれた理由
現在フリーでWEBエンジニアをやられている濱口直行さん。33歳で、プログラミングを学び始め、約半年という短い期間で独立までされた学習ログを余すことなくインタビューさせていただきました。

プログラミングを学習中の方はもちろん、独立をお考えの方まで幅広く活用できる記事になっています。この機会に是非活用していただければと思います。


無料体験レッスン実施中

今あなたはこんな悩みをお持ちではないでしょうか?

「つまづいてばかりで学習が進まない…」
「どこまで勉強すればいいのか、終わりが見えない…」
「習得できたとしてもどうやって仕事につなげればいいのかわからない…」

プログラミング学習やキャリアに関してお困りであれば、まずは『無料体験レッスン』にお申し込み下さい。

あなたにとって、最適の解決策をご提案させていただきます。

詳しくは下の画像をから詳しいサービス内容をご確認ください。

cta_js2

非常識な結果を出した卒業生

活躍する現役エンジニア

人気記事セレクション

LINEで送る
Pocket

この記事が気に入ったら
いいね!をしてフォローしよう

最新情報をお届けします

書いた人

Kotono

Kotono

イタリア在住15年目の22歳です。イタリアの大学で情報科学&応用数学を学んでいます。主にJavaScriptやPythonについての記事を書いたりしています。